css3中user-select的用法詳解

css3中user-select的用法詳解

user-select屬性是css3新增的屬性，用於設定使用者是否能夠選中文本。可用於除替換元素外的所有元素，以下是user-select的主要用法和注意事項的說明，更多資訊可參考如下css3文檔說明。

(1) 文法

user-select:none | text | all | element

預設值：text

適用範圍：除替換元素外的所有元素

(2) 取值說明

none:文本不能被選擇

text:可以選擇文本

all：當所有內容作為一個整體時可以被選擇。如果雙擊或者在 上下文上點擊子項目，那麼被選擇的部分將是以該子項目 向上回溯的最高祖先元素。

Element:可以選擇文本，但選擇範圍受元素邊界的約束

(3) 瀏覽器支援情況

以列出的是值為none|text|all的情況下各個瀏覽器的支援程度；值為element時，大部分瀏覽器不支援，故不列出。

(4) 說明

1.IE6-9不支援該屬性，但支援使用標籤屬性 onselectstart="return false;"來達到 user-select:none 的效果；Safari和Chrome也支援該標籤屬性；

2.直到Opera12.5仍然不支援該屬性，但和IE6-9一樣，也支援使用私人的標籤屬性 unselectable="on" 來達到 user-select:none的效果；unselectable 的另一個值是off；

3.除Chrome</font>和Safari</font>外，在其它瀏覽器中，如果將文本設定為 -ms-user-select:none;，則使用者將無法在該文字區塊中開始選擇文本。不過，如果使用者在頁面的其他地區開始選擇文本，則使用者仍然可以繼續選擇將文本設定為 -ms-user-select:none; 的地區文本；

4.對應的指令碼特性為userSelect

(5) 樣本

css代碼：

.box{    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}

html代碼：

<p class="box" onselectstart="return false;" unselectable="on">    這是測試資料</p>

css3中user-select的用法詳解

user-select屬性是css3新增的屬性，用於設定使用者是否能夠選中文本。可用於除替換元素外的所有元素，以下是user-select的主要用法和注意事項的說明，更多資訊可參考如下css3文檔說明。

參考連結：http://www.php.cn/

(1) 文法

user-select:none | text | all | element

預設值：text

適用範圍：除替換元素外的所有元素

(2) 取值說明

none:文本不能被選擇

text:可以選擇文本

all：當所有內容作為一個整體時可以被選擇。如果雙擊或者在 上下文上點擊子項目，那麼被選擇的部分將是以該子項目 向上回溯的最高祖先元素。

Element:可以選擇文本，但選擇範圍受元素邊界的約束

(3) 瀏覽器支援情況

以列出的是值為none|text|all的情況下各個瀏覽器的支援程度；值為element時，大部分瀏覽器不支援，故不列出。

(4) 說明

1.IE6-9不支援該屬性，但支援使用標籤屬性 onselectstart="return false;"來達到 user-select:none 的效果；Safari和Chrome也支援該標籤屬性；

2.直到Opera12.5仍然不支援該屬性，但和IE6-9一樣，也支援使用私人的標籤屬性 unselectable="on" 來達到 user-select:none的效果；unselectable 的另一個值是off；

3.除Chrome</font>和Safari</font>外，在其它瀏覽器中，如果將文本設定為 -ms-user-select:none;，則使用者將無法在該文字區塊中開始選擇文本。不過，如果使用者在頁面的其他地區開始選擇文本，則使用者仍然可以繼續選擇將文本設定為 -ms-user-select:none; 的地區文本；

4.對應的指令碼特性為userSelect

(5) 樣本

css代碼：

.box{    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}

html代碼：

<p class="box" onselectstart="return false;" unselectable="on">    這是測試資料</p>