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:

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

Related FAQ

Here are some more FAQ related to this topic:

• How to disable text selection highlighting in the browsers using CSS
• How to disable spell checking in HTML forms
• How to disable a link using only CSS