試一試
user-select: none;
user-select: text;
user-select: all;
<section id="default-example">
<p id="example-element">Try to select this text</p>
</section>
#example-element {
font-size: 1.5rem;
}
語法
css
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;
/* Global values */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;
注意： user-select 不是一個繼承屬性，儘管初始值 auto 使它在大多數時候表現得像繼承一樣。基於 WebKit/Chromium 的瀏覽器確實將此屬性實現為繼承的，這違反了規範中描述的行為，並將帶來一些問題。到目前為止，Chromium 選擇修復了這些問題，以使最終行為符合規範。
值
none-
元素及其子元素的文字不可選擇。請注意，
Selection物件可以包含這些元素。 auto-
auto的實際值確定如下：- 在
::before和::after偽元素上，實際值為none。 - 如果此元素的父元素的
user-select實際值為none，則實際值為none。 - 否則，如果此元素的父元素的
user-select實際值為all，則實際值為all。 - 否則，實際值為
text。
- 在
文字-
文字可以被使用者選擇。
all-
元素的內容應原子化地選擇：如果選擇包含元素的一部分，則選擇必須包含整個元素，包括其所有後代。如果在子元素中發生雙擊或上下文點選，則將選擇具有此值的最高祖先。
注意： CSS 基本使用者介面模組為 user-select 屬性定義了 contain 值，以允許選擇從元素內部開始並由該元素的邊界包含，然而，這在任何瀏覽器中都不受支援。
正式定義
正式語法
user-select =
auto |
text |
none |
contain |
all
示例
HTML
html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
CSS
css
.unselectable {
-webkit-user-select: none; /* Safari */
user-select: none;
}
.all {
-webkit-user-select: all;
user-select: all;
}
結果
規範
| 規範 |
|---|
| CSS Basic User Interface Module Level 4 # 內容選擇 |
瀏覽器相容性
載入中…
另見
::selection偽元素- JavaScript
Selection物件