How to disable text selection using CSS

How to disable text selection using CSS | user-select Property Definition, Syntax, Values | Steps to Disable Text Selection

by

Texts are the most fundamental elements of any website or web page. In this tutorial, we have shared how to disable text selection highlighting using CSS? Along with the CSS user-select Property definition and usage, syntax, values,  supported browsers, Steps to disable the text selection with CSS, and Example Codes on How to disable text selection highlighting using CSS?

CSS user-select Property

Theuser-selectproperty defines whether the text of an element can be selected. In various web browsers, in case you double-click on some particular text it will be selected/highlighted. To be unselected or disabled, this property can be used.

Default value: auto
Inherited: no
Animatable: no.
Version: CSS3
JavaScript syntax: object.style.userSelect=”none”

CSS Syntax

user-select: auto|none|text|all;

Do Check:

user-select property values

user-select value description
none user cannot select the text
text user can select the text
all user can select the text with one click
auto user-select value depend upon its parent user-select option
contain selection will be bound to a particular element
element IE version of user-select contain.

How to disable text selection using CSS

By default browsers let us select the text in the browser using the keyboard, pressing the cmd-A combination on a Mac for example, or using the mouse.

How can you disable that, to make your web page behave more like an app and less like a document?

Use the user-select: none; CSS rule.

-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

One thing I use sometimes is to make all the app interface unselectable applying user-select: none; on the body element, then I can re-enable it on specific elements, using:

user-select: text;

Also, observe what statements that we can use for different browsers to disable a selectivity of text.

  • Chrome, Opera: -webkit-user-select
  • Safari: -webkit-touch-callout
  • Mozilla: -moz-user-select
  • Internet Explorer: -ms-user-select

Example on How to disable text selection highlighting in the browsers using CSS?

At present, browsers only assist a small subset of CSS properties for::selection pseudo-element like color, background-color and text-shadow. Let’s see an example:

::selection {
    color: none;
    background: none;
}
/* For Mozilla Firefox */
::-moz-selection {
    color: none;
    background: none;
}

Steps to Disable Text Selection In WebPage Using CSS

There are two steps that should be followed to disable the text selection in webpage using CSS:

  1. Make a HTML file and determine markup for webpage
  2. Make a CSS file and specify styling to disable the text

Step 1: Make a HTML file and determine markup for webpage

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="disable_style.css">
</head>
<body>
  
<h1>Disable Text Selection In WebPage Using CSS</h1>
<p class="select">Select The Text In This Paragraph This Is Selectable Like Any Other Text</p>
<p class="no_select">Try To Select This Text You Are Not Able To Select This Text In Modern Browsers</p>

</body>
</html>

Step 2: Make a CSS file and specify styling to disable the text

In this step, we have used the user-select property to disable the text selection and also the cross-browser prefix to work in most of the browser and also with some old browsers.

body
{
    background-color:#EB99FF;
    font-family:helvetica;
    text-align:center;
    margin:0px auto;
    padding:0px;
}
h1
{
    margin-top:100px;
    color:#424242;
    font-size:40px;
}
h1 p
{
    margin:0px;
    font-size:18px;
    color:black;
    text-decoration:underline;
}
.select
{
    font-size:30px;
    font-weight:bold;
    color:#4000FF;
}
.no_select
{
    font-size:30px;
    font-weight:bold;
    color:#4000FF;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}