スタイルシート -webkit-user-select, -moz-user-select, -ms-user-select

スタイルシートの-webkit-user-selectプロパティは、ユーザがHTMLの要素を選択したときの動作を制御する。-webkit-user-selectはChrome及びSafari、-moz-user-selectはFirefox、-ms-user-selectはInternet Explorerの独自拡張機能である。

ウェブブラウザごとのプロパティ
プロパティウェブブラウザ
user-selectウェブブラウザの種類に依存しない
-webkit-user-selectChrome と Safari
-moz-user-selectFirefox
-ms-user-selectInternet Explorer

user-select

CSSの user-select プロパティを使うと、テキストをマウスなどで選択できるかどうかを指定できる。ウェブブラウザの種類には依存しない。

user-select CSSプロパティには、次に示す値を指定できる。

all
要素全体でのみ選択可能とする。
<p style="user-select: all;">
  このテキストはまとめて選択できます。
  部分的には選択できません。
</p>

このテキストはまとめて選択できます。部分的には選択できません。

auto
文脈により自動的に決定する。
contain
この要素内でのみ選択可能とする。複数の要素に跨った選択は禁止する。
none
要素の選択を禁止する。
<p style="user-select: none;">
  このテキストは選択できません。
</p>

このテキストは選択できません。

text
要素の選択に制限を設けない。
<p style="user-select: text;">
  このテキストは部分的に選択できます。
</p>

このテキストは部分的に選択できます。

-webkit-user-select

ChromeやSafariでテキストをマウスなどで選択できるかどうかを指定する。

<p style="-webkit-user-select: text;">
テキストを選択できます。
</p>
<p style="-webkit-user-select: none;">
テキストを選択できません。
</p>

テキストを選択できます。

テキストを選択できません。

-moz-user-select

Firefoxでテキストをマウスなどで選択できるかどうかを指定する。

<p style="-moz-user-select: text;">
テキストを選択できます。
</p>
<p style="-moz-user-select: none;">
テキストを選択できません。
</p>

テキストを選択できます。

テキストを選択できません。

-ms-user-select

Internet Explorerでテキストをマウスなどで選択できるかどうかを指定する。

<p style="-ms-user-select: text;">
テキストを選択できます。
</p>
<p style="-ms-user-select: none;">
テキストを選択できません。
</p>

テキストを選択できます。

テキストを選択できません。

CSSバージョン

W3C非標準

JavaScript

CSSの-webkit-user-selectプロパティをJavaScriptから参照又は設定するには、styleオブジェクトのWebkitUserSelectプロパティを参照又は設定する。

document.body.style.webkitUserSelect = 'none';

参考文献

W3C (2021) CSS Basic User Interface Module Level 4

CSSプロパティ

CSSには次のプロパティがある。