In This Article
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..!
Pingback: CSS Background Image Text Effect - PHPCODER.TECH
Pingback: Install Composer on Linux and Windows in 3 Steps - PHPCODER.TECH
Pingback: Check First Value Greater in Multiple Inputs with Same Class Name using jQuery - PHPCODER.TECH
Pingback: How to Convert JSON to Array PHP - PHPCODER.TECH
Pingback: JavaScript Append HTML to Body - PHPCODER.TECH
Pingback: 4 Simple Steps To Braintree Account Setup with API - PHPCODER.TECH
Pingback: Full Forms Related to Computer Programming - PHPCODER.TECH
Pingback: Check if JavaScript variable is NULL or Undefined - PHPCODER.TECH
Pingback: Display Current Date & Time in HTML using Javascript-PHPCODER.TECH
Pingback: Login with Google Account using PHP Step by Step - PHPCODER.TECH
Pingback: CSS background-image Properties - PHPCODER.TECH
Pingback: Integrate Google reCaptcha in Codeigniter - PHPCODER.TECH
Pingback: 7 Most Useful JavaScript Array Functions - PHPCODER.TECH