Disable text selection highlighting using CSS

Here, we are going to learn how to disable text selection highlighting using CSS (Cascading Style Sheet)?
Submitted by Anjali Singh, on January 17, 2020

Introduction:

Texts are the most fundamental elements of any websites or web pages, they form the basis of the web pages or websites because if you don’t write something that you will not be able to present anything. Therefore, it should not be unknown that dealing with texts is something that is done very frequently during the development of websites or web pages. There are numerous properties related to texts for editing as well as styling which further helps in making our web pages or websites responsive and user-interactive.

Use of selectable texts:

Sometimes we want our written text to do something when the user selects it. Either we want it to take the user to some other page or indicate something while the text is being selected. Texts are used as links that are generally used to take users from one page to another. Therefore selectable texts also become necessary for such kind of situations, if your text is not selectable then don’t expect it to do anything while it is being selected. But what if we want to disable text selection? Well, that is the sole purpose of this article, to let you know how to disable text selection highlighting with the help of CSS. There are times when you do not want your text to do anything, so might need to implement this method there. So keep on reading and you will get your answer.

Solution:

To achieve this task is not very tough beside you might be aware of the property by which we are going to make this thing happen. Without much further adieu, let us have a look at the solution.

To disable text selection highlighting using CSS property user-select is used and set its value to none. See! Not tough right? All you gotta do is make use of the user-select property and set it to none and there you got it! Your text selection is now disabled. So go ahead and try it out yourself and a very basic example has been mentioned below for your reference, in case you get stuck anywhere.

Syntax:

    Element{
        user-select:none;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        .disable-text {
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="disable-text">
        <h1>Unselectable Text</h1>
    </div>
    <div>
        <h1>Selectable Text</h1></div>
</body>

</html>

Output

Disable text selection highlighting using CSS | Exammple

In the above example, the text "unselectable text" cannot be selected by the user whereas the text "selectable text" is selected by the user.

Note:

But we have to add a browser-specific prefix before the user-select option for Safari, Firefox and Internet Explorer or edge. Chrome and Opera support non-prefixed versions.

Here is the syntax supported by different browsers,

    user-select: none; /* Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */

CSS Tutorial & Examples »

Aligning element to the bottom of the div using CSS

Disabling a link using CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples