Browser INPUT text selection colors

Question

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.)

yes, I have seen this question... from 3+ years ago. And it doesn't have a suitable answer to it. :) — Yanick Rochon
– Yanick Rochon, Commented Jan 28, 2013 at 3:50
I am afraid you have to create your own text input using javascript and CSS. — Antony
– Antony, Commented Jan 28, 2013 at 3:51
@YanickRochon Sometimes the answer really is "you can't do that". If the user has chosen an OS theme where the highlighted text background color is white, I'm sure they're used to what they see by now. — cimmanon
– cimmanon, Commented Jan 28, 2013 at 4:26
@cimmanon, I understand. Unfortunately, this problem arise on my test machine and both screen caps are taken on the same machine; the problem can be replicated on more than one test machines all with default Windows 7 theme and settings. All I want is an acceptable for this problem. (Def "acceptable": something that can be applied only in IE to fix this problem.) — Yanick Rochon
– Yanick Rochon, Commented Jan 28, 2013 at 12:51

mrh1967 · Accepted Answer · 2014-07-31 14:27:35Z

1

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;
}

answered Jul 31, 2014 at 14:27

mrh1967

1921 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yanick Rochon Over a year ago

I will select this answer if it can get a few more upvotes. Unfortunately, I am no longer using IE, nor working on the original project, and cannot confirm that it resolves the original issue. My educated guess is that, as odd as it looks, it might have just done it.

Collectives™ on Stack Overflow

Browser INPUT text selection colors

Chrome

IE 8 and 9

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Chrome

IE 8 and 9

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related