MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

この翻訳は不完全です。英語から この記事を翻訳 してください。

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

Controls the actual Selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property user-focus was proposed in early drafts of a predecessor of css3-ui but was rejected by the working group.

注記: Check the compatibility table for the proper prefixes to use in various browsers.

初期値auto
適用対象全要素
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* does not work in Safari, use only "none" or "text", or else it will allow to type in the html container*/

-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
none
The text of the element and sub-elements will not be able to be selected. Selection can contain these elements. Starting with Firefox 21 none behaves like -moz-none, so selection can be re-enabled on sub-elements using -moz-user-select:text.
auto
The text will be selected according to the browser's default properties.
text
The text can be selected by the user.
-moz-none
The text of the element and sub-elements will appear as if they cannot be selected. Selection can contain these elements. Selection can be re-enabled on sub-elements using -moz-user-select:text. Starting with Firefox 21 none behaves like -moz-none.
all
In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
contain
element (IE-specific alias)
Enables selection to start within the element; however, the selection will be contained by the bounds of that element. Supported only in Internet Explorer.

注記: One of the differences between browser implementations is inheritance. In Firefox, -moz-user-select is not inherited by absolutely positioned elements, but in Safari and Chrome, -webkit-user-select is inherited by those elements.

auto | text | none | contain | all

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
<body>
  <p class="unselectable">The user is not able to select this text in Firefox, Chrome, Safari and IE.</p>
</body>

規格

Specification Status Comment
CSS Basic User Interface Module Level 4
user-select の定義
草案 Initial definition. Also defined -webkit-user-select as a deprecated alias of user-select.

ブラウザ実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート

6.0-webkit-
54.0

(有)-ms-webkit (有)-moz[1] 10-ms 15.0-webkit 3.1-webkit
element 未サポート (有) 未サポート (有) ? 未サポート
contain 未サポート[3] ? 未サポート ? 未サポート[3] 未サポート
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート 2.1 54.0 (有)-ms-webkit ? 10-ms
11-webkit[2]
未サポート 3.2(有) 54.0
element ? 未サポート (有) ? ? ? 未サポート 未サポート
contain 未サポート[3] 未サポート[3] ? 未サポート ? ? 未サポート 未サポート[3]

[1] In addition to the -moz prefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] MSDN のドキュメント を参照してください。

[3] Chromium のバグです。

See also

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

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