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 のプロパティで、ユーザーがテキストを範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、クロームとして読み込まれたコンテンツには影響を与えません。

試してみましょう

構文

css
/* キーワード値 */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
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 になります。
  • 編集可能な要素の場合、使用値は contain になります。
  • 上記以外で、親要素の user-select の使用値が all の場合、対象要素の使用値も all になります。
  • 上記以外で、親要素の user-select の使用値が none の場合、対象要素の使用値も none になります。
  • 上記以外の場合、使用値は text になります。
text

ユーザーはテキストを範囲選択できます。

all

この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。

contain

要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。

メモ: CSS UI 4 では、 user-select: element が contain に名称が変わります。

公式定義

初期値auto
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

user-select = 
  auto     |
  text     |
  none     |
  contain  |
  all

例

HTML

html
<p>このテキストを選択できるはずです。</p>
<p class="unselectable">ちょっと、このテキストの選択はできませんよ！</p>
<p class="all">一度クリックすると、このテキスト全体を選択します。</p>

CSS

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

関連情報