これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

/* キーワード値 */
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;

メモ: このプロパティは JavaScript の Selection オブジェクトに関連付けられています。

メモ: このプロパティを使うには、まだ多くのブラウザーでベンダープレフィックスが必要です。後述のブラウザーの対応を確認してください。

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

構文

none
対象要素とその子孫要素の文章は範囲選択できません。 Selection オブジェクトはこれらの要素も含むことができることに注意してください。 Firefox 21 以降では、 none-moz-none と同じような動作をします。よって、 -moz-user-select: text を使うことで子孫要素での範囲選択を再び有効にできます。
auto

auto の計算値は下記のように決められます。

  • ::before::after の疑似要素では、計算値は none になります。
  • 編集可能な要素の場合、計算値は contain になります。
  • 上記以外で、親要素の user-select の計算値が all の場合、対象要素の計算値も all になります。
  • 上記以外で、親要素の user-select の計算値が none の場合、対象要素の計算値も none になります。
  • 上記以外の場合、計算値は text になります。
text
ユーザーはテキストを範囲選択できます。
-moz-none
対象要素とその子孫要素の文章は、まるで範囲選択できないかのように表示されます。 Selection オブジェクトはこれらの要素も含むことができることに注意してください。 -moz-user-select: text を使うことで子孫要素での範囲選択を再び有効にできます。 Firefox 21 以降では、none-moz-none と同じような動作をします。
all
HTML editor では、対象要素や子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。
contain
element (IE 特有のエイリアス)
要素内で範囲選択を始めると、その要素の枠を超えて選択することはできません。これは Internet Explorer だけが対応しています。

メモ: ブラウザーの実装ごとに異なる点の 1 つに継承が挙げられます。 Firefox では、 -moz-user-select は絶対配置された要素では継承されません。しかし Safari と Chrome では、 -webkit-user-select はそのような要素でも継承されます。

auto | text | none | contain | all

HTML

<p>このテキストを選択できるはずです。</p>
<p class="unselectable">ちょっと、このテキストの選択はできませんよ!</p>

CSS

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

結果

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 54
完全対応 54
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -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 完全対応 10Opera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 3.1
接頭辞付き
完全対応 3.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 54
完全対応 54
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 54
完全対応 54
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -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.2
接頭辞付き
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 6.0
接頭辞付き
完全対応 6.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
auto
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
all
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
none
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 21
完全対応 21
完全対応 あり
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 21
完全対応 21
完全対応 あり
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
text
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 部分対応 一部
補足
部分対応 一部
補足
補足 Allows typing in the <html> container.
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 部分対応 一部
補足
部分対応 一部
補足
補足 Allows typing in the <html> container.
Samsung Internet Android 完全対応 あり
contain
実験的
Chrome 未対応 なしEdge 完全対応 12
完全対応 12
完全対応 12
代替名
代替名 非標準の名前 element を使用しています。
Firefox 未対応 なしIE 完全対応 あり
完全対応 あり
完全対応 10
代替名
代替名 非標準の名前 element を使用しています。
Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 12
完全対応 12
完全対応 12
代替名
代替名 非標準の名前 element を使用しています。
Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, hamasaki, sutara79, 0918nobita
最終更新者: mfuji09,