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: 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;
}
構文
/* キーワード値 */
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 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
user-select =
auto |
text |
none |
contain |
all
例
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 |
ブラウザーの互換性
Loading…
関連情報
::selection擬似要素- JavaScript の
Selectionオブジェクト