ユーザー操作

user-select

user-select は、ドラッグやダブルクリックで要素の文字を選べるかどうかと、どう選ばれるかを指定します。

構文

auto | text | none | contain | all

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  user-select: none;
}

user-selectnone

autotextnoneall

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

none：文字を選べなくします。user-select を書いていない中の要素も、選べなくなります。
text：文字を選べます。
all：一部だけを選ぼうとしても、要素の中身がまとめて選ばれます。コードやクーポン番号など、まとめてコピーしてほしい文字に使えます。
auto（初期値）：親が none なら none、親が all なら all、入力欄など編集できる要素では中だけを選べる contain、それ以外は text と同じになります。

プレビューの見本の文章をドラッグして、選べるかどうかを試せます。

仕様にはほかに、選び始めた要素の外へ選択を広げない contain もありますが、対応しているブラウザが無いので、このページのコントロールには出していません。

Safari は接頭辞の無い user-select に対応していないので、-webkit-user-select: none; も一緒に書きます。このページのプレビューは user-select だけを書くので、Safari では見本の文章を選べるままです。

none は、ボタンのラベルなど、うっかり選ばれると操作の邪魔になる文字に使います。開発者ツールやソースの表示、読み上げソフトからは文字を読めるので、文章をコピーさせない仕組みにはなりません。