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:
- outline and its longhands
- text-decoration and its associated properties
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.
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.