How to Prevent Text Selection in CSS

Migel Hewage Nimesha Feb 02, 2024

CSS CSS Text Selection

Use the CSS user-select Attribute to Prevent Text Selection
Add user-select: none to a Text
Add the user-select Attribute to the Text in a Table
Conclusion

In CSS, there are lots of attributes we can use to give some modifications to an element. Here, the word modification refers to the styling of an element or giving or removing various controls of an element.

Use the CSS `user-select` Attribute to Prevent Text Selection

When designing web pages, we usually add some text, which can be paragraphs, data in a table, labels in a form, etc. When that text appears on web pages, people who view them can select the text and copy it for various activities.

For example, a guy who visits a web page can select some text from this page and copy them for his use; however, some web page owners do not prefer that. So to prevent that, we can block the text selection.

CSS provides us an attribute to prevent text selection which is the user-select attribute. Using this attribute, we can prevent users from selecting any text.

But we all use different kinds of web browsers. We should change the way we use this attribute if we use different types of web browsers.

Below we have shown how to use the user-select attribute in various web browsers.

Syntax:

-webkit-user-select: none;    /*Standard method. Can be used in Safari*/
-moz-user-select: none;       /*Standard method. Can be used in Firefox*/
-ms-user-select: none;        /*Standard method. Can be used in Internet Explorer or Edge*/
user-select: none;            /*Standard method. Can be used in Google Chrome*/

The first method is for iOS and Mac users since their default browser is Safari. Firefox users can use the second method, and users who use Internet Explorer or Edge can use the third method.

Those who use Google Chrome as their browser can use the fourth method.

In the above syntaxes, there are several options we can assign to the value of the user-select attribute.

Option	Description
`auto`	The `auto` value is the default value that the `user-select` attribute use. If the browser allows, we can select the text.
`none`	If we use this option, the users won’t be able to select any text. In other words, we are preventing the text selection.
`text`	We can use this to enable users to select the text.
`all`	Through this option, we can select the text with a single click instead of a double click.

In this article, we will discuss the none option of the user-select attribute to prevent the users from selecting the text.

Add `user-select: none` to a Text

To understand this concept easily, let’s add a simple text onto a web page as follows.

<div>
    <p class="unselect">This is a text</p>
</div>

Add Styles to the Text

Let’s add some CSS styles to this text for a better view.

.unselect{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

Here, we have given the text a font, font-size, and padding. It should look like this, and we can select the text.

As you can see, we can select our text as usual.

Add the `user-select` Attribute With the `none` Value

After adding styles, we can set the user-select attribute to prevent text selection. We use none as the attribute’s value, as shown below.

.unselect{
    user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

<div>
    <p class="unselect">This is a text</p>
</div>

As you can see, our text is now unselectable.

But the above code only works when using the Google Chrome web browser. We can modify the above code to be used in other web browsers.

.unselect{
    user-select: none; /*Standard method. Can use in Google Chrome*/
    -webkit-user-select: none; /*Standard method. Can use in Safari*/
    -moz-user-select: none; /*Standard method. Can use in Firefox*/
    -ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

<div>
    <p class="unselect">This is a text</p>
</div>

Add the `user-select` Attribute to the Text in a Table

Now, let’s create a table to try this attribute. The table we will build has two columns: First Name and Last Name, and two rows including relevant data.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

As you can see, we have created the table, but it has no styles. Let’s style our table using CSS.

table {
    background-color: rgb(243, 150, 253);
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: auto;
}

td, th {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

As shown in the result, we have styled our table. You can also see that we can select the text inside the table, so let us try to disable it.

Like in the previous example, we can add the user-select attribute to the table. You can add it to the whole table or only for selected cells.

We will add the user-select attribute only for the table headers. We can add the below code chunk to the same CSS code.

th{
    user-select: none; /*Standard method. Can use in Google Chrome*/
    -webkit-user-select: none; /*Standard method. Can use in Safari*/
    -moz-user-select: none; /*Standard method. Can use in Firefox*/
    -ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

If we run the code, we will obtain a result like the one below.

As you can see, only the text in the headers cannot be selected.

Conclusion

This article has discussed preventing text selection and how CSS’s user-select attribute helps achieve it. As we learned, there are different ways to use this attribute in various web browsers.

We took two examples to clarify the basic things of preventing text selection. There are other methods, but CSS provides a simple way to accomplish this.

Author: Migel Hewage Nimesha

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Use the CSS user-select Attribute to Prevent Text Selection

Add user-select: none to a Text