Text selection styling
Piotr Elmanowski | Published: 6 Nov, 2015
In CSS3 we are able to change the style of standard (browser default) text selection. You can see it here on CSS-WORKSHOP.COM after selecting some part of text, the background becomes green. It always requires two rules, one for Firefox (with -moz- prefix) and second for other browsers (without prefix).
You can see the examples below or: watch live demo | download example
All selections styling
Using this CSS rules you will style selections on the whole page.
|
1 2 3 4 5 6 7 8 9 10 |
::-moz-selection { background: #000; text-shadow: none; color: #FFF; } ::selection{ background: #000; text-shadow:none; color:#fff } |
Only paragraph selection styling
You can define different styling for specific elements using ::selection paraelement.
|
1 2 3 4 5 6 7 8 |
p::-moz-selection { background: #000; color: #F00; } p::selection{ background: #000; color:#F00; } |
Selection styling with text-shadow
To modify selections you can use only a few properties like: color, background, text-shadow (except IE) or outline.
|
1 2 3 4 5 6 7 8 9 10 |
p.extra-styling::-moz-selection { background: #0DDB00 none repeat scroll 0% 0%; text-shadow: 1px 1px 1px #000; color: #F9F487; } p.extra-styling::selection{ background: #0DDB00 none repeat scroll 0% 0%; text-shadow: 1px 1px 1px #000; color: #F9F487; } |
Selection styling without background
You can also make a selection without background.
|
1 2 3 4 5 6 7 8 9 10 |
p.no-background::-moz-selection { background: none; text-shadow: 1px 1px 1px #000; color: #F98787; } p.no-background::selection{ background: none; text-shadow: 1px 1px 1px #000; color: #F98787; } |
Watch live demo or Download example
