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

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

54

6 -webkit-

12 -ms-

12 -webkit-

あり -moz-

49 -webkit-

44 -webkit- 1

1015 -webkit- 3.1 -webkit-
auto あり12 あり10 あり あり
all あり12 あり10 あり あり
none あり12

21

あり -moz-

10 あり あり
text あり12 あり10 あり あり2
contain なし

12

123

なし

あり

103

なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

54

6 -webkit-

54

18 -webkit-

12 -ms-

12 -webkit-

あり -moz-

49 -webkit-

44 -webkit- 1

14 -webkit- 3.2 -webkit- 6.0 -webkit-
auto あり あり12 あり あり あり あり
all あり あり12 あり あり あり あり
none あり あり12

21

あり -moz-

あり あり あり
text あり あり12 あり あり あり2 あり
contain なし なし

12

123

なし なし なし なし

1. 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.

2. Allows typing in the <html> container.

3. Supported as element.

関連情報

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

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