CSS user-select用法及代碼示例

此屬性用於指定用戶是否可以選擇文本。

注意：雙擊某些文本將被選中/突出顯示，但是可以使用此屬性來防止這種情況。

用法:

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
蘋果瀏覽器

相關用法

注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 CSS | user-select Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。