How to Change the Selected Text Color in Internet Explorer

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?

  1. Safari 6.0.3 Mac*: #B4D5FE
  2. Chrome 26.0.1410.65 Mac*: #ACCEF7
  3. Firefox 19.0 Mac*: #B4D5FF
  4. Chrome 26.0.1410.64 m Windows 8+: #3297FD
  5. Firefox 20.0.1 Windows 8+: #3399FF
  6. Safari 5.1.7 Windows 8+: #3298FD
  7. 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:

Screenshot of hex color codes highlighted in the same color


This will be a never-ending list, however, since each...

  1. Browser
  2. Operating System
  3. 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



Leave a reply



Submit