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;
初期値auto
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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 | 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 の非推奨のエイリアスであることも定義した。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
user-select
実験的
Chrome 完全対応 54
完全対応 54
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 69
完全対応 69
完全対応 1
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 2 — 3
接頭辞付き
接頭辞付き -khtml- のベンダー接頭辞が必要
WebView Android 完全対応 54
完全対応 54
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 54
完全対応 54
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 4
接頭辞付き
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 14
接頭辞付き
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 1.0
接頭辞付き
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
all
実験的
Chrome 完全対応 53Edge 未対応 なしFirefox 完全対応 1IE 未対応 なしOpera 完全対応 40Safari 未対応 なしWebView Android 完全対応 53Chrome Android 完全対応 53Firefox Android 完全対応 4Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
auto
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 10Opera 完全対応 15Safari 完全対応 2WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 3Samsung Internet Android 完全対応 1.0
contain
実験的
Chrome 未対応 なしEdge 完全対応 12
代替名
完全対応 12
代替名
代替名 非標準の名前 element を使用しています。
Firefox 未対応 なしIE 完全対応 10
代替名
完全対応 10
代替名
代替名 非標準の名前 element を使用しています。
Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
none
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 21
完全対応 21
未対応 1 — 65
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 15Safari 完全対応 2WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 21
完全対応 21
未対応 4 — 65
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 14Safari iOS 完全対応 3Samsung Internet Android 完全対応 1.0
text
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 10Opera 完全対応 15Safari 部分対応 2
補足
部分対応 2
補足
補足 Allows typing in the <html> container.
WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 部分対応 3
補足
部分対応 3
補足
補足 Allows typing in the <html> container.
Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報