Styling the selection color of an input type=text, possible?

jquery html css selection

28,284

Solution 1

Works for me in Firefox (latest version) but it doesn't work in Webkit. Here's a test: http://jsfiddle.net/Gp8Rr/

I tested it in latest versions of Chrome, Safari, and Firefox, and Firefox was the only one that worked. Maybe a bug, or maybe Webkit doesn't allow you to style that part of their UI?

Just an update here, to go into a little more detail. ::selection is a non-standard pseudo-element, which means that even though most browsers support it you have no guarantee that they will continue to do so, or that new browsers will support it. So go ahead and use it, but don’t make it essential to the useability of your site. There’s more on this topic over at the MDN.

Solution 2

I do not think there is any way to do this. The color of selected text is decided at the software/os level and is not something you can really control with javascript. The select api page http://api.jquery.com/select/ mentions several plugins that will tell you what text the user has selected. The only thing I can think of trying is when the user selects some text, you remove the text they have selected and insert the same text, marked up in a span that will highlight it in a different color. However, they will still see the blue as they are highlighting...

Solution 3

It works for me if you select what you want manually.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">

p::-moz-selection, input::-moz-selection, textarea::-moz-selection {
    color: red;
    background-color: grey;
}
</style>
<script type="text/javascript">
window.onload = function() {
    var message = document.getElementById('itext');
    // Select a portion of text
    createSelection(message,3, 10);

    // get the selected portion of text
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
};

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}       
</script>
</head>

<body>
<p>This paragraph is selection-aware.</p>
<form action="#">
<input type="text" id="itext" value="So is this input[text]" />
<textarea id="itextarea">And this textarea, as well</textarea>
</form>
</body>
</html>

Tested in Firefox 4.0b6

It is not working with your jQuery function because jQuery is selecting your <input /> element, instead of selecting the actual text. Try something like the script above. You should see it working.

Solution 4

I'm pretty sure this can't be done. I looked into this a while back and ended up using a div tag in place of an input and made it look like an input field. That allowed me to control and change the highlighted color of the selected text. Then I just had the input as a hidden field that updated accordingly.

This probably isn't the answer you were looking for, but that was how I was able to work around the issue.

Solution 5

This does work at least on my FF 7.0.1:

input::-moz-selection {
    background-color: green;
}

View more solutions

28,284

Tommy

Updated on July 09, 2022

Comments

Tommy almost 2 years
Having an input
```
<input type="text" id="myTest" value="bla bla bla"/>
```
and doing this (using jQuery)
```
$('#myTest').select();
```
causes "bla bla bla" to be selected with default dark blue selection color.

Now, is there any way I can change this color using css? css3 can change selection using for instance
```
::-moz-selection {
  background: #ffb7b7;
}
```
but this only works on text in other elements, not in html inputs.

Any ideas?

/T
- Pekka over 14 years
  
  If you find anything, please update this open question: stackoverflow.com/questions/2043695/…
Tommy over 14 years

I don't see how this will affect the selection color of a selection in an input field (type=text)?
aug over 9 years

As of 2015, this seems to be supported in many browsers including IE9+, Chrome, Safari, Firefox. For people passing by, I would say this should be the accepted answer.