user-select
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
user-select
は CSS のプロパティで、ユーザーがテキストを範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、クロームとして読み込まれたコンテンツには影響を与えません。
試してみましょう
構文
/* キーワード値 */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;
/* グローバル値 */
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
になります。
text
-
ユーザーはテキストを範囲選択できます。
all
-
この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。
メモ: CSS 基本ユーザーインターフェイスモジュールでは、 contain
値を user-select
プロパティに定義して、要素の境界で囲まれた要素内で選択を開始できるようにしていますが、これはどのブラウザーも対応していません。
公式定義
初期値 | auto |
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
HTML
<p>このテキストを選択できるはずです。</p>
<p class="unselectable">ちょっと、このテキストの選択はできませんよ!</p>
<p class="all">一度クリックすると、このテキスト全体を選択します。</p>
CSS
.unselectable {
-webkit-user-select: none; /* Safari */
user-select: none;
}
.all {
-webkit-user-select: all;
user-select: all;
}
結果
仕様書
Specification |
---|
CSS Basic User Interface Module Level 4 # content-selection |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
::selection
擬似要素- JavaScript の
Selection
オブジェクト