此屬性用於指定用戶是否可以選擇文本。
注意:雙擊某些文本將被選中/突出顯示,但是可以使用此屬性來防止這種情況。
用法:
user-select:auto|none|text|all;
屬性值:
- auto:它具有默認值,即用戶可以選擇文本。
用法:
user-select:auto;
例:
<!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>
輸出:
- none:它用於防止用戶選擇文本,這意味著用戶無法自行選擇文本。
用法:
user-select:none;
例:
<!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>
輸出:
- text:此屬性使用戶可以選擇文本。它不提供阻止用戶選擇文本的函數。
用法:
user-select:text;
例:
<!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>
輸出:
- all:它用於僅單擊鼠標一次而不是雙擊來選擇文本。
用法:
user-select:all;
例:
<!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>
輸出:
支持的瀏覽器:user-select屬性支持的瀏覽器如下所示:
- 穀歌瀏覽器
- IE瀏覽器
- 火狐瀏覽器
- Opera
- 蘋果瀏覽器
相關用法
- HTML Style userSelect用法及代碼示例
- CSS transition-property用法及代碼示例
- CSS nav-right用法及代碼示例
- CSS all屬性用法及代碼示例
- CSS nav-up用法及代碼示例
- CSS nav-down用法及代碼示例
- CSS right屬性用法及代碼示例
- CSS top屬性用法及代碼示例
- CSS max-width用法及代碼示例
- CSS flex屬性用法及代碼示例
- CSS border-top用法及代碼示例
- CSS max-height用法及代碼示例
- HTML DOM value用法及代碼示例
- CSS min-height用法及代碼示例
注:本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 CSS | user-select Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。