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 browser 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. Let's check out an example:
Example
Try this code »::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:
