CODEWITHSUNDEEP
cssinternet-explorer
Yanick Rochon
Yanick Rochon

Reputation: 53536

Browser INPUT text selection colors

On a project using jQuery UI and jQx, we are applying to all form fields the user selected theme and came across this problem :

When selecting text in input (text) fields, the background color is not the same across browsers. I know that this is browser / OS specific, however it leads to this oddity :

Chrome

enter image description here

IE 8 and 9

enter image description here

As you can see, the selected text in IE may cause problems as the selection background color blends with the rest of the element. (Why IE has this color set to white is beyond me.)

I have tried the "changing text selection color" CSS trick, but it works everywhere else than what I'm trying to change.

Is there some voodoo magic or some other poorly documented feature that can make IE behave less like... how it behaves? (And hope that IE10 really sucks less.)

Upvotes: 2

Views: 804

Answers (1)

mrh1967
mrh1967

Reputation: 182

Even though this question is very old I'm answering here to save anyone else trying to resolve this thinking it isn't possible. We were ready to give up and just accept this behaviour from Internet Explorer when we stumbled on the answer accidentally.

It seems that Internet Explorer uses this highlight method for selected text in any textbox that has the color set in its style - if you remove this attribute the highlighting works normally.

We stumbled accross the answer when we moved the color attribute into its own class and applied both classes to the textbox.

The following will exhibit this text selection highlighting in IE:

<input type="text" id="uiSizeWidth" class="SizeInput">

.SizeInput {
    width: 70px;
    text-align: center;
    height: 30px;
    font-weight: bold;
    margin: 2px;
    color: #ef4915;
}

But this will not:

<input type="text" id="uiSizeWidth" class="SizeInput InputColor">

.SizeInput {
    width: 70px;
    text-align: center;
    height: 30px;
    font-weight: bold;
    margin: 2px;
}

.InputColor {
    color: #ef4915;
}

You can then use the following CSS to style the highlighting to whatever:

::-moz-selection {
    color: #fff;
    background: #39f;
}

Upvotes: 1

Related Questions