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

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

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.

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,