How to change the selected text color In Internet explorer?
It can't be done in IE with pure CSS and I don't know of any pre-packaged JS that will get the job done, either.
Changing colour on text selection in IE 9
Quirksmode confirms this isn't supported in IE. I know of no alternative to this (CSS or JS) for IE.
Option text color is white in IE/Edge
Try adding this meta
tag in your head
, That would fix your problem.
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
</head>
How to change the background color of the selected text in browsers?
Yes: you can use the ::selection
and ::-moz-selection
pseudo-elements (MDN), which allows you to specify the foreground and background colours of selected content. This will work in all major browsers except IE < 9, for which there is no alternative.
::selection {
background: pink;
color: yellow;
}
::-moz-selection {
background: pink;
color: yellow;
}
how to get text in disabled option to change color in IE9?
Something like this?
select :disabled.red {
color: red;
}
Here's a document about the :disabled
pseudo-class from Microsoft.
Here's a fiddle that should work in IE9 and up.
Update: This seems to work only in IE>8. This answer points out the workaround of using the readonly attribute on form elements. That's not an option for the option tag though.
There are JavaScript workaround for old IEs around. A simple Google search led me to this site which provides a jQuery solution.
From the blog:
By adding a little css styling magic and you end up with an identical
outcome in all other modern browsers.You can then enable and disable using javascript. Many people have
written code which makes an option look like it’s disabled, waits for
a click on the option element and then bluring it or focusing the next
/ previously selected option to make it act like it’s disabled.I have come up with functions used with jQuery to disable / enable a
select option by converting it to an optgroup and back. It is tested
in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9
(although the opgroups jump to the bottom)
What is the browser-default background color when selecting text?
- Safari 6.0.3 Mac*:
#B4D5FE
- Chrome 26.0.1410.65 Mac*:
#ACCEF7
- Firefox 19.0 Mac*:
#B4D5FF
- Chrome 26.0.1410.64 m Windows 8+:
#3297FD
- Firefox 20.0.1 Windows 8+:
#3399FF
- Safari 5.1.7 Windows 8+:
#3298FD
- Internet Explorer 10.0.4 Windows 8+:
#3399FF
*Found using ColorSnapper for Mac
+Found using ColorSchemer for Windows
And here's a screenshot of that information with the hex color codes highlighted in the same color:
This will be a never-ending list, however, since each...
- Browser
- Operating System
- Browser Version (maybe)
...will have a different color. Also, as of CSS3, you can change the color using:
::selection{
background-color:#000;
}
How do I change the color of the text cursor in an input field in IE?
The color of the text cursor in an input on IE is always the inverse of the background color. So you can't on IE.
This is also unspecced by W3C so don't expect support to be anywhere, if there is, then it's merely an artifact :-)
Edit: 9-years later and we now have caret-color
, but not for IE or Edge. Works on other browsers.
Get rid of select highlight in IE
You can use:
select::-ms-value {background: transparent;}
This will change its colour once selected, but while selecting, you'll still see that blue colour on hover.
Related Topics
Display:Inline-Block Not Working on Safari
Animating with Variables Angular 4
How to Create Two HTML Buttons Side by Side
Darken a Background Image Without Affecting the Text
How to Force Chapters to Start on Odd Pages (HTML and Epub)
Float Multiple Fixed-Width/Varible-Height Boxes into 2 Columns
3 Column Layout (Fixed, Fluid, Fixed) with Minimum Width
Animating a CSS Gradient Background on the Hover Event
Absolute Positioning Ignoring Padding
CSS Import or <Link Rel...> with "Media" Attribute
Enforce a "Min-Margin" for a Fluid Layout
Stray Vertical Line Above 965 Pixels with Border Radius in Safari
Fill Svg Element with With a Background-Image with an Offset
Pre Code Blocks Stretch the Content Beyond Screen Width in a Centered Flex Container