user-select | WebworksTips

user-selectは、HTML上の要素の選択を制御することができるプロパティである。

キーワード	説明
element	指定された要素内で選択を開始するときに、テキストを選択できます。テキスト選択はその要素の境界に制限されます。
none	指定された要素内で選択を開始するときに、テキストを選択できません。指定された要素の外で開始されるテキスト選択では、引き続き要素を入力できます。
text	指定された要素内で選択を開始するときに、テキストを選択できます。テキスト選択はその要素の境界に制限されず、境界を越えて拡張できます。
auto	これは初期値です。要素に input 要素など編集可能テキストが含まれる場合、 contenteditable が “true” に設定された要素の場合、テキストは選択可能です。それ以外の場合、選択は親ノードの -ms-user-select プロパティの値によって決定されます。
contain	要素の内部を範囲選択することができます。要素の外部まで選択することはできません。
all	要素の一部をクリックすると要素全体が選択されます。

<p>このテキストを選択できるはずです。</p>
<p class="unselectable">ちょっと、このテキストの選択はできませんよ！</p>
<p class="all">一度クリックすると、このテキスト全体を選択します。</p>

.unselectable {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}