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.