user-select

インタラクション・UX

ユーザーがテキストを選択できるかどうかを制御するプロパティです。

構文

Syntax

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

user-select: none;

実行結果

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

テキスト選択を無効化

.code-block {
  user-select: all;
}

実行結果

クリックで全選択: console.log('hello');

クリックで全テキストを選択

.button {
  user-select: none;
  cursor: pointer;
}

実行結果

ボタンのテキスト選択を防止

UIコンポーネントでは通常none、コードブロックではallが便利。

Chrome 54+, Firefox 69+, Safari 3.1+