Custom Text Selection Style with ::selection

Using custom text selection style is a small but neat feature towards to a great UI. With the ::selection pseudo-element you can easily style the highlighted parts made by the user.

For styling, you can only use the following properties:

• color
• background-color
• cursor
• caret-color
• outline and its longhands
• text-decoration and its associated properties
• text-emphasis-color
• text-shadow.

The browser support is almost complete. As always Opera Mini is out and iOS Safari too. We only have to use one prefix which is -moz.

::-moz-selection {
    background: #23A8B9;
    color: #fff;
}

::selection {
    background: #23A8B9;
    color: #fff;
}

Using it, we should be cautious about the color contrast and the readability. By default, the selection’s variation is well, but we can make it worse easily.