How To Change Text Selection Color
Selection in CSS ::selection is a selector of CSS, that highlighted the text, which is selected by the user.
For example, a part of a web page that is selected by the user using any device like a mouse or any pointing device.
See an image (selection CSS), also I provide the complete demo,
When you use ::selection that can change the background and foreground of the text of selected text.
CSS Syntax | ::selection
|
1 2 3 |
::selection { CSS property declarations; } |
On the below example, we change the background text color using ::selection CSS property,
|
1 2 3 4 |
::selection { background-color: red; color: white; } |
The above ::selection CSS code supported by all the browser but for Mozilla firefox, we change the code,
|
1 2 3 4 5 |
/* Code for Mozilla Firefox */ ::-moz-selection { color: red; background: yellow; } |
How to disable text selection highlighting
Here is a code for disable text selection highlighting,
|
1 2 3 4 5 6 7 |
<p class="element" style="color:red;-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" unselectable="on" onselectstart="return false;" onmousedown="return false;"> You Can not select me </p> |
CSS ::selection Live Demo
See the Pen CSS ::selection PHPCODER.TECH by Bikash Panda (@phpcodertech) on CodePen.
Also Check:
- Concept of CSS Grid Layout
- How to Include Comments in CSS
- CSS background-image Properties
- CSS Background Image Text Effect
Happy Coding..!
DOM | Document Object Model 
13 Replies to “Selection in CSS | CSS ::selection”