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.
Syntax:
user-select: auto;
Example:
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>GeeksforGeeks</h1> <h3>user-select:auto;</h3> <div> GeeksforGeeks: A computer science portal for geeks </div> </body></html> |
Output:
none: It is used to prevent text selection from the user means the user can’t select the text on its own.
Syntax:
user-select: none;
Example:
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>GeeksforGeeks</h1> <h3>user-select:none;</h3> <div> GeeksforGeeks: A computer science portal for geeks </div> </body></html> |
Output:
text: This property enable the user to select the text. It does not provide prevent text selection from the user.
Syntax:
user-select: text;
Example:
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>GeeksforGeeks</h1> <h3>user-select:text;</h3> <div> GeeksforGeeks: A computer science portal for geeks </div> </body></html> |
Output:
all: It is used to select the text with just one click of a mouse instead of a double-click.
Syntax:
user-select: all;
Example:
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>GeeksforGeeks</h1> <h3>user-select:text;</h3> <div> GeeksforGeeks: A computer science portal for geeks </div> </body></html> |
Output:
Supported browsers: The browsers supported by user-select Property are listed below:
- Google Chrome 54
- Edge 79
- Internet Explorer 10
- Firefox 69
- Opera 41
- Safari 16
Please Login to comment...