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.
Follow us on Twitter
Do you want to support and help us? A Twitter following or a sharing means a lot to us. Thank you!