I have created carousel arrows using font-icons and they are appearing as required on Firefox and Chrome on my system even I have checked it on my android and they are showing the same result as red color arrows generated by the font-icons.
But when someone is looking at the website on iPhone in the safari browser it is not showing these buttons properly, instead it is showing blue background and white color arrow on it.
I am using font-icons for generating these arrows in my code and I have thoroughly checked my CSS several times but no luck.
Here is my CSS for these buttons:
body.home .et-pb-arrow-next::before, body.home .et-pb-arrow-prev::before {
color: #ff0000 !important;
display: block !important;
margin-top: -35px !important;
}
body.home #main-content .et-pb-arrow-prev::before {
content: "\25C0" !important;
font-size: 40px !important;
}
body.home #main-content .et-pb-arrow-next::before {
content: "\25b6" !important;
font-size: 40px !important;
}
Related
I'm having such a weird problem with a html of a mail marketing newsletter when receiving the email on apple mail (osx and ios- both latest) on dark mode. I add the media queries and everything works perfect from light to dark, images changes perfectly but theres an anoying problem with tags.
I'm using my cta buttons as but i cannot by any means to add a background color to the and change ist's text color, this only on dark mode. On light everything works as it should. I send the images of the button in ligt and dark for better understanding as well my inline code and my css code. I've tried with span in text, without, with borders, with padidings, etc etc, everything i could remember. On any browser dark and light works great.
Hope someone can help me.
Many thanks
#media (prefers-color-scheme: dark) {
a.nos-button,
a.nos-button span{
background-color: #fff !important;
background: #fff !important;
border-color: #fff !important;
color: #000 !important;
}
}
#media (prefers-color-scheme: light) {
a.nos-button,
a.nos-button span{
background-color: #000 !important;
background: #000 !important;
border-color: #000 !important;
color: #fff !important;
}
}
<span>COMPRE JÁ</span>
The md-switch when toggled on the Safari browser displays a yellow section on the md-thumb section of the switch.
The toggle should just be that blue color and have no yellow. It turns yellow after toggling the switch on or off. Other browser handle this toggle switch fine. The md-bar is fine, but the `md-thumb' is what is yellow. I tried setting everything to the blue I am using...
LESS
md-switch .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}
md-switch.md-checked .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}
md-switch[disabled] .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}
HTML
<md-switch ng-model="orgAdminSwitch" class="md-primary" ng-change="orgAdminChanged(orgAdminSwitch)" ng-show="isAdmin" aria-label="Org Admin Switch" style="float: right;"></md-switch>
But this only dimmed the yellow. The yellow was still visible and this only happens in Safari when the switch is toggled on or clicked to toggle off. Any idea on how to remove this?
I found a work around for this issue. If you set display: none on the md-switch .md-thumb: before and md-switch .md-ripple-container it will stop the color glitch. You will lose the ripple when toggling the switch but there will no longer be this combination of colors. The issue itself is due to different colors coming through and combining to make this yellow color. This is an issue only on the Safari browser, but this is an easy workaround and will solve the issue on all browsers.
The code will look like:
md-switch .md-thumb: before {
display: none;
}
md-switch .md-ripple-container {
display: none;
}
I have created this page with a download form, and it includes a dropdown that is styled using CSS. This is what it looks like in Firefox and Chrome, where it is working as hoped:
In Microsoft Edge, the dropdown is essentially invisible, though, and I think it's because the background colour is not rendering. It looks like this:
If you click in the area where the dropdown is, it then becomes partially visible:
I have looked at other answers on Stack Overflow about styling in CSS, but it's not entirely clear to me why the background is not rendering. Some answers indicate I need to place styling directly on the option element, and other answers use Javascript with a ul element.
If possible, I'd like to use a pure CSS solution. I don't need to support IE 8 or below, only IE 9 and above, including Edge.
This is the CSS, in SASS format, that I am using:
.drop-down {
display: block;
-webkit-appearance: none; /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
-moz-appearance: none; /*REMOVES DEFAULT FIREFOX STYLE*/
border: 0 !important; /*REMOVES BORDER*/
margin-top: .5em;
color: white;
font-size:1em;
padding: .4em 2em .4em .6em;
cursor: pointer;
background-size: 1em;
background: $formever_blue url(dropdown_arrow.png) no-repeat;
background-position-x: calc(100% - 0.5em);
background-position-y: center;
}
.download-form .drop-down {
font-size: 2em;
width: 100%;
}
How can I make the dropdown style in Edge match how it appears in Firefox?
You can change calc(100% - .5em) in your background property to fixed value. Or add another background property without calc before current special for IE.
Update:
background: $color url() no-repeat;
background-position-x: calc(100% - 0.5em);
background-position-y: center;
I am trying to change the color of the dropdown items in ipad but it seems not to be working.this is my code.
select
{
background: url('/images/test.png') no-repeat right;
background-color: #333;
background-size: 16px 13px;
background-position: 62px ;
padding:6px;
font-size: 14px;
color: #ffffff;
border: 0;
}
But the dropdown items are not changing to white color in iPad...any suggestions?
You can't change the appearance of selectbox items in iOS browsers. iOS Safari doesn't listen to the styling you give it. You would have to make your dropdowns in pure javascript to give them a different style.
Working on a windows phone 8 app in Phonegap. When I touch the dropdown box a blue highlight will appear.
I gone through the question already asked here
windows phone 8 highlight colors in input fields
tried the answer
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
it solved the issue partially (only on click event). But my page has scroll, so when I try to scroll, the blue highlight is appearing again. I tried 'MSPointerDown, MSPointerUp, MSPointerMove' in the above code, but nothing happened.
Here are the styles I used
{
width: 100%;
background: #fafafa;
color:#a3a3a3;
font-size:14px;
border:none;
outline:none;
display: inline-block;
appearance:none;
height:60%;
min-height: 30px !important;
border-radius:5px;
margin-top: 5%;
padding-left:8%;
}
IE has a pseudo class that overwrites this
select::-ms-value{ background-color: #fafafa; color: #a3a3a3; }
this solves it
link http://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx