How to change the default text selection color in the browsers using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS ::selection Pseudo-element

By default, most of the browsers highlights the selected text in blue background. However you can override this setting with the CSS ::selection pseudo-element.

Currently browsers only support a small subset of CSS properties for ::selection pseudo-element like color, background-color and text-shadow.

  • ::selection {
  •     color: #fff;
  •     background: #dda0dd;
  •     text-shadow: 1px 1px 2px #b040b0;
  • }
  • /* For Mozilla Firefox */
  • ::-moz-selection {
  •     color: #fff;
  •     background: #dda0dd;
  •     text-shadow: 1px 1px 2px #b040b0;
  • }
 

Note:The CSS text-shadow in ::selection pseudo-element is not supported in Internet Explorer; only supported in Chrome, Safari and Firefox 17+.


Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.