Changing the highlight color when selecting text when entering HTML text

Question

I searched this on the Internet and can't even find anyone else, even asking about it, not to mention a solution ...

Is there a way to change the color of the selection area in text input when selecting text? Not the selected border or background, but the part that appears around the text when you really have the selected text.

Answer 1

Thanks for the links, but it seems that the actual text selection just isn't showing up.

Regarding the actual problem, I decided to take a different approach, eliminating the need for text input and using innerHTML with some JavaScript. It not only turns into highlighted text, but also looks much cleaner.

This granularity of customization for HTML form control is another good argument for completely eliminating form controls. Haha

Answer 2

If you are looking for this:

Here's the link:

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

Answer 3

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 4

I understand that this is an old question, but for anyone who meets it, this can be done using contenteditable , as shown in this JSFiddle .

Kudos to Alex, who mentioned this in the comments (I have not seen this yet!)

Answer 5

All the answers here are correct when it comes to the ::selection pseudo-element and how it works. However, the actual question asks the question of how to use it for text inputs .

The only way to do this is to apply the rule through the parent input element (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 6

Here is rub:

  :: selection {
       background: # ffb7b7;  / * WebKit / Blink Browsers /
     }
     :: - moz-selection {
       background: # ffb7b7;  / Gecko Browsers * /
     } 

In the selection selector, color and background are the only properties that work. What you can do for some additional talent is changing the highlight color for different paragraphs or different sections of the page.

All I did was use a different highlight 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 that selectors are not combined, although> a style block does the same. It does not work if you combine them:

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

What, since the browser ignores the entire selector, if there is a part of it, they do not understand or are invalid. There are some exceptions to this (IE 7?), But not with respect to these selectors.

Demo

LINK WHERE INFO FROM FROM

Answer 7

@ Mike Eng,

When choosing the background color of the text, the color of the text can be changed using :: selection , note that :: selection works in chrome, to make it work in firefox-based browsers, try this :: - moz-selection

Try the following code snippet in reset.css or on 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 field.

Answer 8

It seems that when you define a border inside a focus pseudo-element style declaration, it uses it instead of the usual blue border. Using this, you can define a style that exactly matches the border of the element.

 input:focus, textarea:focus { border:1px solid gray; } #textarea { position:absolute; top:10px; left:10px; right:10px; width:calc(100% - 20px); height:160px; display:inline-block; margin-top:-0.2em; } 

 <textarea id="textarea">yo</textarea> 

Here's a modified border style:

 input:focus, textarea:focus { border:2px dotted red; } #textarea { position:absolute; top:10px; left:10px; right:10px; width:calc(100% - 20px); height:160px; display:inline-block; margin-top:-0.2em; } 

 <textarea id="textarea">yo</textarea> 

Answer 9

Try using this code:

 /* For Mozile Firefox Browser */ ::-moz-selection { background-color: #4CAF50; } /* For Other Browser*/ ::selection { background-color: #4CAF50; } 

Answer 10

I think this may help:

highlight styles

You can define the color and background for the user text selects.

Try it below. If you select something, and it looks like this: the browser supports selection styles.

This is a paragraph with normal ::selection .

This is a paragraph with ::-moz-selection .

This is a 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; } 

Quote from Quirksmode