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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。