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: 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

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

関連情報