CSS user-select Property
This property is used to specify whether the text can be selected by the user or not.
Note: The double-click on some text will be selected/highlighted but this property can be used to prevent this.
Syntax:
user-select: auto|none|text|all;
Default Value: auto
Property value:
- auto: It has the default value i.e. the user can select the text.
- none: It is used to prevent text selection from the user means the user can’t select the text on its own.
- text: This property enables the user to select the text. It does not provide prevent text selection from the user.
- all: It is used to select the text with just one click of a mouse instead of a double-click.
Example: In this example, we are using user-select: auto property.
html
<!DOCTYPE html> < html > < head > < title >user-select property</ title > < style > div { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } h1, h3 { color: green; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >user-select:auto;</ h3 > < div > w3wiki: A computer science portal for Beginner </ div > </ body > </ html > |
Output:
Example: In this example, we are using user-select: none property.
html
<!DOCTYPE html> < html > < head > < title >user-select property</ title > < style > div { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } h1, h3 { color: green; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >user-select:none;</ h3 > < div > w3wiki: A computer science portal for Beginner </ div > </ body > </ html > |
Output:
Example: In this example, we are using the user-select:text property.
html
<!DOCTYPE html> < html > < head > < title >user-select property</ title > < style > div { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } h1, h3 { color: green; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >user-select:text;</ h3 > < div > w3wiki: A computer science portal for Beginner </ div > </ body > </ html > |
Output:
Example: In this example, we are using user-select: all property.
html
<!DOCTYPE html> < html > < head > < title >user-select property</ title > < style > div { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } h1, h3 { color: green; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >user-select:text;</ h3 > < div > w3wiki: A computer science portal for Beginner </ div > </ body > </ html > |
Output:
Supported browsers: The browsers supported by user-select Property are listed below:
- Google Chrome
- Edge
- Firefox
- Opera
- Safari