CSS Tip: Styling Selected Text

We’ve all seen it—you’re on a page with a really amazing design, and select some text for some reason or another.  The selected text is then styled with some default background color, clashing with the amazing design.

Naturally, there is a CSS solution.  WebKit and Opera developers can use the ::selection pseudo element, and Mozilla developers can use ::-moz-selection.  Here is an example which changes the background color of all selected elements to a very translucent white:

*::selection {
    background-color: rgba(255, 255, 255, 0.1);
}

No longer does your highlighted text need to clash with your design!