Changing the highlight color when selecting text in an HTML text input

Question

I ve been looking for this throughout the web and can t even find anyone else even asking this  let alone a solution     Is there a way to change the color of the highlight area within a text input when text is selected  Not the highlight border or the background  but the portion that appears around the text when you have the text actually selected

User · Answer

this is the code        Works on common browsers        selection       background-color   352e7e      color   fff          Mozilla based browsers        -moz-selection       background-color   352e7e      color   fff         For Other Browsers        -o-selection       background-color   352e7e      color   fff       -ms-selection       background-color   352e7e      color   fff          For Webkit        -webkit-selection       background-color   352e7e      color   fff

User · Answer

Here is the rub         selection         background   ffb7b7     WebKit Blink Browsers               -moz-selection         background   ffb7b7    Gecko Browsers          Within the selection selector  color and background are the only properties that work  What you can do for some extra flair  is change the selection color for different paragraphs or different sections of the page   All I did was use different selection color for paragraphs with different classes       p red  selection         background   ffb7b7            p red  -moz-selection         background   ffb7b7            p blue  selection         background   a8d1ff            p blue  -moz-selection         background   a8d1ff            p yellow  selection         background   fff2a8            p yellow  -moz-selection         background   fff2a8        Note how the selectors are not combined  even though  the style block is doing the same thing  It doesn t work if you combine them    lt pre gt    Combining like this WILL NOT WORK    p yellow  selection  p yellow  -moz-selection     background   fff2a8    lt  pre gt    That s because browsers ignore the entire selector if there is a part of it they don t understand or is invalid  There is some exceptions to this  IE 7   but not in relation to these selectors   DEMO  LINK WHERE INFO IS FROM

User · Answer

All answers here are correct when it comes to the   selection pseudo element  and how it works  However  the question does in fact specifically ask how to use it on text inputs   The only way to do that is to apply the rule via a parent of the input  any parent for that matter     x000D   x000D   parent   -webkit-selection   contenteditable   -webkit-selection   x000D   background   ffb7b7  x000D    x000D   x000D   parent   -moz-selection   contenteditable   -moz-selection   x000D   background   ffb7b7  x000D    x000D   x000D   parent   selection   contenteditable   selection   x000D   background   ffb7b7  x000D    x000D   x000D     Aesthetics    x000D  input   contenteditable    x000D    border 1px solid black  x000D    display inline-block  x000D    width  150px  x000D    height  20px  x000D    line-height  20px  x000D    padding  3px  x000D    x000D   lt span class  parent  gt  lt input type  text  value  Input    gt  lt  span gt  x000D   lt span contenteditable gt Content Editable lt  span gt  x000D   x000D   x000D

User · Answer

Try this code to use      For Mozile Firefox Browser       -moz-selection   background-color   4CAF50        For Other Browser     selection   background-color   4CAF50

User · Answer

If you are looking for this     Here is the link   http   css-tricks com overriding-the-default-text-selection-color-with-css

User · Answer

Thanks for the links  but it does seem as if the actual text highlighting just isn t exposed   As far as the actual issue at hand  I ended up opting for a different approach by eliminating the need for a text input altogether and using innerHTML with some JavaScript  Not only does it get around the text highlighting  it actually looks much cleaner   This granular of a tweak to an HTML form control is just another good argument for eliminating form controls altogether  Haha

User · Answer

I guess this can help       selection styles      It s possible to define color and background for text the user   selects       Try it below  If you select something and it looks like this  your   browser supports selection styles       This is the paragraph with normal   selection       This is the paragraph with   -moz-selection       This is the paragraph with   -webkit-selection       Testsheet   p normal  selection     background  cc0000    color  fff     p moz  -moz-selection     background  cc0000    color  fff     p webkit  -webkit-selection     background  cc0000    color  fff       Quoted from Quirksmode

User · Answer

It seems like when you define the border inside of a focus pseudo element style declaration it uses that instead of the normal blue border  Using that you can define a style that is exactly the same as the element border     x000D   x000D  input focus  textarea focus   x000D      border 1px solid gray  x000D    x000D   x000D   textarea    x000D    position absolute  x000D    top 10px  x000D    left 10px  x000D    right 10px  x000D    width calc 100  - 20px   x000D    height 160px  x000D    display inline-block  x000D    margin-top -0 2em  x000D    x000D   lt textarea id  textarea  gt yo lt  textarea gt  x000D   x000D   x000D    Here is a modified border style     x000D   x000D  input focus  textarea focus   x000D      border 2px dotted red  x000D    x000D   x000D   textarea    x000D    position absolute  x000D    top 10px  x000D    left 10px  x000D    right 10px  x000D    width calc 100  - 20px   x000D    height 160px  x000D    display inline-block  x000D    margin-top -0 2em  x000D    x000D   lt textarea id  textarea  gt yo lt  textarea gt  x000D   x000D   x000D

User · Answer

Mike Eng   On selecting the text background color  text color can be changed with the help of   selection  note that   selection works in in chrome  to make that work in firefox based browsers try this one   -moz-selection  Try the following snippet of code in reset css or the css page where exactly you want to apply the effect     selection       Works only for the chrome browsers    background-color   CFCFCF    This turns the background color to Gray    color   000     This turns the selected font color to Black      -moz-selection       Works for the firefox based browsers    background-color   CFCFCF    This turns the background color to Gray    color   000     This turns the selected font color to Black     The above code will work even in the input boxes too

User · Answer

I realise this is an old question but for anyone who does come across it this can be done using contenteditable as shown in this JSFiddle   Kudos to Alex who mentioned this in the comments  I didn t see that until now

[html] Changing the highlight color when selecting text in an HTML text input

Examples related to html

Examples related to css

Examples related to text

Examples related to input

Examples related to highlight