Home » CSS

The user-select Property in CSS

CSS | user-select Property: Here, we are going to learn about the user-select property with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on January 10, 2020

CSS | user-select Property

Description:

Astonishingly, web development provides us with a vast amount of features. From editing to styling, everything is covered to the core. Let us take this discussion further, by learning about one another such as feature or property known as user-select property in CSS.

The user-select property in CSS is a very fundamental yet crucial property when it comes to making a web page responsive. The property is used to specify whether or not a text of an element can be selected.

Generally, if you double-click on some text it will be selected or highlighted. This property can be used to prevent this.

Syntax:

    Element{
        user-select : auto|none|all|text;
    }

user-select Property values

1) user-select : auto

auto is the default value of the user-select property. The core function of this property is that it helps the user select a particular text.

Syntax:

    Element{
        user-select:auto;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            user-select: auto;
        }
    </style>
</head>

<body>
    <h1>The user-select Property</h1>
    <div>Includehelp is a learning website.</div>
</body>

</html>

Output

CSS | user-select Property | Example 1

In the above example, the text of div element can be selected.

2) user-select : none

none is another value of the user-select property. It is used to prevent text selection from the user which means that the user can’t select the text on its own when this value is active.

Syntax:

    Element{
        user-select:none;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            user-select: none;
        }
    </style>
</head>

<body>
    <h1>The user-select Property</h1>
    <div>Includehelp is a learning website.</div>
</body>

</html>

Output

CSS | user-select Property | Example 2

In the above example, if you try you cannot select the text inside the div element.

3) user-select : all

all is another value of the user-select property. It is used to select the text with just one click of a mouse instead of a double-click.

Syntax:

    Element{
        user-select:all;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            user-select: all;
        }
    </style>
</head>

<body>
    <h1>The user-select Property</h1>
    <div>Includehelp is a learning website.</div>
</body>

</html>

Output

CSS | user-select Property | Example 3

In the above example, you can select the text inside the div element in a single click only.

4) user-select : text

text is another value of the user-select property. It is used to enable the user to select the text. It is not used for providing prevent text selection from the user.

Syntax:

    Element{
        user-select:text;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            user-select: text;
        }
    </style>
</head>

<body>
    <h1>The user-select Property</h1>
    <div>Includehelp is a learning website.</div>
</body>

</html>

Output

CSS | user-select Property | Example 4

In the above example, if you want to select the text in div element you can select it in a double click.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.