首頁 > web前端 > css教學 > user-select如何使用?預設值是什麼?

user-select如何使用?預設值是什麼?

清浅
發布: 2019-05-14 17:04:27
原創
9634 人瀏覽過

user-select是用來設定使用者是否能夠選取文本,它的預設值是text,表示的是可以選擇文字。它還有其他三個屬性值分別是none不能被選擇,all所有內容作為整體可被選擇以及element可以選擇但受元素邊界約束

user-select如何使用?預設值是什麼?

user-select屬性是css3新增的屬性,用於設定使用者是否能夠選取文字。

語法

user-select:none | text | all | element
登入後複製

預設值:text

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

取值說明

none:文字不能被選擇

text:可以選擇文字

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

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

說明

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和*Safari外,在其它瀏覽器中,如果將文字設定為-ms-user-select:none;,則使用者將無法在該文字區塊中開始選擇文字。不過,如果使用者在頁面的其他區域開始選擇文本,則使用者仍然可以繼續選擇將文本設定為-ms-user-select:none; *的區域文本;

4、對應的腳本特性為userSelect

範例:

css程式碼:

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
登入後複製

html程式碼:

<div class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</div>
登入後複製

以上是user-select如何使用?預設值是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板