CODEWITHSUNDEEP
csscss-selectors
Ashley Strout
Ashley Strout

Reputation: 6258

Chrome ::selection CSS selector fails on textbox

I have written a basic website that calculates SHA1 hashes. I know, there are already hundreds, but this was more to try my hand at designing than making something that a lot of people will use. An important part of my design was displaying the calculated hash in a textbox with the text auto-selected with JavaScript. This textbox has a CSS3 ::-selection pseudo element to change the color of the selected text so it doesn't look like a plain 'ol text box. Here is the CSS code:

#result::-moz-selection {
    background: white;
    color: red;
}

#result::selection {
    background: white;
    color: red;
}

I know I probably could have combined the selectors, but separating them was something I tried when this wasn't working. The HTML is a plain <input type="text" id="result">, along with a few other inconsequential attributes. You can see the full code at SHA1.in. Am I doing something wrong here? TIA!

BTW, I got my code from CSS Tricks.

Upvotes: 0

Views: 620

Answers (1)

Chris
Chris

Reputation: 26888

Replacing your input element with a div seems to fix the issue. Apparently Chrome prevents overriding the selection colors for text inputs.

This is a reported bug: little link.

Upvotes: 2

Related Questions