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

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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties