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 h

Answer 1

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

Answer 2

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

.parent ::-webkit-selection, [contenteditable]::-webkit-selection {
	background: #ffb7b7;
}

.parent ::-moz-selection, [contenteditable]::-moz-selection {
	background: #ffb7b7;
}

.parent ::selection, [contenteditable]::selection {
	background: #ffb7b7;
}

/* Aesthetics */
input, [contenteditable] {
  border:1px solid black;
  display:inline-block;
  width: 150px;
  height: 20px;
  line-height: 20px;
  padding: 3px;
}

<span class="parent"><input type="text" value="Input" /></span>
<span contenteditable>Content Editable</span>

Answer 3

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:

<pre>/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}</pre>

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

Answer 4

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