user-select

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

/* キーワード値 */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* グローバル値 */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Mozilla 特有の値 */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* WebKit 特有の値 */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Safari では動作しません。 "none" または
                             "text" を使ってください。さもないと、
                             <html> コンテナーで入力可能になってしまいます。 */

/* Microsoft 特有の値 */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

: 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
要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。
element (IE 特有のエイリアス)
contain と同じです。 Internet Explorer だけが対応しています。

公式定義

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

形式文法

auto | text | none | contain | all

HTML

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

CSS

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

結果

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 4
user-select の定義
草案 初回定義。 -webkit-user-selectuser-select の非推奨のエイリアスであることも定義した。

ブラウザーの互換性

BCD tables only load in the browser

関連情報