I am using IE9 and can't remove the blue background when a select dropdown is focused. When an item is selected from any of the drop downs the element is overlaid with a blue box. It doesn’t occur on Chrome or Firefox.
This code removes it for IE10 and Edge
select::-ms-value {
background: none; /* remove blue background on ie10/ie11 when selected*/
color:#5a5a5a;
}
I had the same problem and I resolved it using this:
select:focus::-ms-value {
background-color: white;
color:#000;
}
I hope this helps.
Related
This question already has an answer here:
Why css "all: unset" works weirdly in Safari browser for MacOS?
(1 answer)
Closed 2 years ago.
I can't set the text color of this button when using all: unset in Safari 13.1 on macOS 10.15. It seems to work fine on Chrome 80 and Firefox 74.
button {
all: unset;
color: white;
background-color: darkblue;
}
<button>button</button>
Desired: The word "button" should appear in white on a dark blue background.
Actual: In Safari (only?!) the word "button" appears black on a dark blue background, which is illegible.
What's going wrong here? Is this my fault? Is there a workaround?
This is a known bug in Safari. https://bugs.webkit.org/show_bug.cgi?id=158782 It's been open since 2016.
This is happening because the "all: unset" is setting -webkit-text-fill-color to black, and that overrides color.
You can work around it by setting -webkit-text-fill-color to the desired color. Hopefully they'll fix this bug someday!
button {
all: unset;
color: white;
-webkit-text-fill-color: white;
background-color: darkblue;
}
<button>button</button>
Interesting. The all: unset reset all the values to their inherited values.
If you want a workaround, all you need to do is wrapper it in an element with white text. The snippet below isn't ideal, but it should work in Safari.
button {
all: unset;
background-color: darkblue;
}
.button-wrapper {
color: white;
}
<div class="button-wrapper">
<button>button</button>
</div>
I have a fairly simple hover effect on a span inside a button
HTML:
<span class="content">text</span>
CSS:
span.content:hover {
background-color: #2b9385;
background-image: linear-gradient(#2b9385, #007571);
color: red;
}
When I hover over the span, it works fine in Edge and Chrome. In Firefox and IE 11, nothing happens.
Here is the weird part. If I use the dev. tools and inspect the element with hover checked, the CSS changes to the correct values and the background of the span changes correctly on the screen, it just doesn't work when I actually hover over it with the mouse. If I add "color:blue" to the hover section, the text color changes as it should when I hover over it, only the background part doesn't work.
I've tried adding vendor prefixes to the linear gradient part, but it didn't help (and shouldn't be needed in either case). Using #hex color values also didn't help.
Any clues appreciated.
I've added a Pen so you can see that it works in Chrome but not in FF. If you inspect the .content span in Firebug and click on the hover checkbox, the styles will be applied correctly, even though hovering over the button does nothing.
Pen
Just try this. It will definitely help.
.progress-button:hover span#button_content.content {
background-color: #2b9385;
background-image: linear-gradient(#2b9385, #007571);
cursor: pointer;
color: red;
}
I think you are missing colon(:) so just try this
background-image:(red, orange);
How do i change the color of X that appears on input[type=search]
By using webkit-search-cancel-button and webkit-appearance: none i have been able to change it to a colored square or circle but i have been unable to change the color of X.
The issue is default color of the X on safari is black and by textbox is black hence this is not visible. Chrome picks a safe color of grey but it too has the same issue.
You probably don't need the solution anymore, but I will just it leave here to see if it helps anyone.
You can't change the color of the clear button (x) directly (as far as I tried), but here's some trick I figured out to change the button appearance.
Basically, I just removed the default clear button and replaced it with a black clear button image (I used base64 encoded image here, you can use any).
[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 10px;
width: 10px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
background-size: 10px 10px;
}
<input type="search">
I could't find a way to change only the color but you can overwrite the "x" button style with:
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/*Your new styles */
height: 10px;
width: 10px;
background: red;
}
For now this is supported by Webkit browsers(Chrome, Safari).
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button
A workaround for changing the color is using filter. In my case, I simply wanted the x to be black or gray (instead of blue), so I used a black and white filter
You could use an invert filter to make the x light on a dark background.
When visiting the page in Incognito (removing :visited styles) the link's text is blue, but it should be white.
.button {
color:#ffffff; /* white */
background:#d8eaf0;
}
.button:visited {
color:#ffffff; /* white */
background:#d8eaf0;
}
.button:hover {
color:#ffffff; /* white */
background:#3838a5;
}
.button:active {
color:#ffffff; /* white */
background:#d8eaf0;
}
text
Where your ".button" CSS style is, change it to ".button:link".
Try setting the position to absolute. And if that still doesn't work, go onto incognito mode and go on inspect element and check to see if the text box is overlapping.
If nothing still works, use inspect elements on Google and that should give you a great headstart. Good luck :D
I have this simple hover effect http://www.mysecretathens.gr/Sera/index.html
#footer ul li:hover {
opacity: 0.7;
filter: alpha(opacity=40);
}
in the social media icons down in the footer, but in IE I see a blue-border all around each of the icons. How to fix that? Do you also see this?
I don't see it, but I suppose they are <a> anchor tags. So for IE you would have to add border:0px; for the anchor tags which are your social media icons.
If you have a link around an image IE automatically puts a border around it.
To remove blue border Add a { border: 0 } in your CSS
Add this to your css:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
Edit: add it before filter: alpha(opacity=40);
if you have an link (anchor), it is the standard of internet explorer. in this case you have to reset the border with:
a {
border :none;
}
or
a {
border :0px;
}
and for the next time, i recommend you jsfiddle where you can put easily your code to run and debug it on the site for questions here.