當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文


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。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。