WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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

Topic: HTML / CSSPrev|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:

Your Feedback:

We would love to hear from you, please drop us a line.