CSS Reference

user-select

テキストを範囲選択できるかどうかを指定する

user-select プロパティは、文書内のどの要素をユーザーが選択できるか、そしてその選択の方法を指定します。

このプロパティを使うことで、ユーザーにとって必要な部分だけを選択可能にし、隣接する内容をうっかり選択してしまうことを防ぎ、インタラクションを容易にすることができます。

例えば、フォームのラベルやボタンなど、選択する必要がない要素は user-select: none; を指定することで、ユーザーがその要素を選択できないようにできます。一方、文章やテキストを選択できるようにしたい場合は、user-select: text; を指定することで、その要素を選択可能にします。

指定できる値は下記の通りです。

auto auto の場合、その値は以下のように決定されます。（既定値）
  • 疑似要素 ::before や ::after に指定されている場合、none として扱われます。
  • 要素が編集可能な要素の場合、contain として扱われます。
  • それ以外の場合、
    • 親要素の user-select の値が all なら、all として扱います。
    • 親要素の user-select の値が none なら、none として扱います。
    • 上記以外の場合は text として扱います。
text 要素に制限なく選択が可能で、特に制約を設けません。
none 要素内の選択を禁止します。要素内で選択を開始することはできず、要素の外部で開始された選択が、その要素内に入ることもできません。ユーザーがそのような選択を試みた場合、選択範囲は要素の境界で終了します。
contain 要素内で選択を開始した場合、その選択範囲は要素外にはみ出ることはありません。要素の外部で開始された選択は、その要素内に入ることができません。
all 要素全体を一括で選択する挙動を指定します。もし選択範囲が要素の一部分だけにかかる場合、その要素全体とすべての子要素を含めて選択されます。
親要素の user-select が all の場合、その親要素全体も選択されます。

ただし、選択の制御はユーザー体験（UX）を向上させるために利用するべきであり、特定のコンテンツを選択可能にしたり制限したりする際には、ユーザーが混乱しないような適切な設計を行うことが重要です。

例えばよかれと思って長文のテキスト全体に user-select: all; を指定したりすると、ユーザーが任意の箇所だけを選択してコピーしたり、コンテキストメニューから何らかの機能を使用したりといったことができなくなる場合があります。また、user-select: none; を指定する際も注意が必要です。

user-selectの仕様

初期値
  • auto
対象となる要素
  • すべての要素、オプションで ::before、::after 擬似要素
継承
  • なし

user-selectのサンプルソース

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

主要ブラウザの対応

IE11 ○-ms-
Edge（EdgeHTML） ○-ms-
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○-webkit-
iOS Safari ○-webkit-
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome