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.
The ::selection pseudo-element was removed from the CSS specification and currently there isn’t any plan to put it back.
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.
