Selection in CSS | CSS ::selection

In This Article

1 How To Change Text Selection Color
2 CSS Syntax | ::selection
3 How to disable text selection highlighting
4 CSS ::selection Live Demo
- 4.1 Related

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

::selection {
    CSS property declarations;
}

::selection {

CSS property declarations;

}

On the below example, we change the background text color using ::selection CSS property,

::selection {
    background-color: red;
    color: white;
}

::selection {

background-color: red;

color: white;

}

The above ::selection CSS code supported by all the browser but for Mozilla firefox, we change the code,

/* Code for Mozilla Firefox */
::-moz-selection {
  color: red;
  background: yellow;
}

/* 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,

<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>

<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:

Happy Coding..!

Was this article helpful?

YesNo

Selection in CSS | CSS ::selection

How To Change Text Selection Color

CSS Syntax | ::selection

How to disable text selection highlighting

CSS ::selection Live Demo

Related

13 thoughts on “Selection in CSS | CSS ::selection”

Leave a Reply Cancel reply