Last Updated on January 26, 2021 by Roshan Parihar
In this tutorial, learn how to change text selection color and background using CSS. The short answer is: use the CSS selector ::selection in combination with ::-moz-selection that add color and background to the text selected.
However, the CSS selector ::-moz-selection is required to make color and background visible in the Firefox browser on selection. Let’s find out with the examples given below:-
How to Change Text Selection Color in CSS
To change the text selection color in CSS, you have to use the CSS property color in the ::selection and ::-moz-selection CSS selector.
See the example given below to apply the color to the selected paragraph content.
|
1 2 3 4 5 6 7 8 9 10 |
<style> p::-moz-selection{ color: green; } p::selection{ color: green; } </style> <strong>Select the below text to see the effect</strong> <p>This is a paragraph content to check the selection color.</p> |
Output
Select the below text to see the effect
This is a paragraph content to check the selection color.
When you select the text content given in the example above, you will get the above text content that appears green in color. You can change the color as per the requirement of your website and match it with your website color.
Set Text Background to Display on Select in CSS
To set the background color to display on text selection, you have to use the CSS property background in the ::selection and ::-moz-selection CSS selector.
See the example given below that added a yellow color to the background:-
|
1 2 3 4 5 6 7 8 9 10 |
<style> p::-moz-selection{ background: yellow; } p::selection{ background: yellow; } </style> <strong>Select the below text to see the effect</strong> <p>Check the background color by selecting this paragraph content.</p> |
Output
Select the below text to see the effect
Check the background color by selecting this paragraph content.
You have to select the text content given above to check the background color. It changes the background color to the specified yellow color.
Add Both Color and Background to the Selected Text Using CSS
In addition to the above examples, you can add both color and background to the display on text selection. you have to use both CSS properties background and color together in the ::selection and ::-moz-selection CSS selector.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> p::-moz-selection{ color: orange; background: blue; } p::selection{ color: orange; background: blue; } </style> <strong>Select the below text to see the effect</strong> <p>Select this paragraph content to check the color and background.</p> |
Output
Select the below text to see the effect
Select this paragraph content to check the color and background.
The above example contains both the background and the color to display when someone selects the text content. You can select the text content given in the example above to get the background and color on the selection.
You may also like to read
Advertisements
Advertisements