CSS 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>

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

初期値

user-select プロパティの処置期は auto である。

適用対象

全ての要素に対して user-select プロパティが適用できる。

継承

親要素に対して指定した user-select プロパティは、その子孫要素へ継承されない。

JavaScript

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

document.getElementById("example").style.userSelect = "none"

参考文献

World Wide Web Consortium (2021) CSS Basic User Interface Module Level 4

-webkit-user-select

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

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

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

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

JavaScript

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

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

-moz-user-select

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

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

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

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

JavaScript

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

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

-ms-user-select

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

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

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

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

JavaScript

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

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

参考文献

Microsoft (2017) -ms-user-select property

関連記事