CSS
CSS3

user-selectで要素のテキスト選択を「させる」

More than 1 year has passed since last update.

CSSのプロパティ user-select について。

参考: user-select - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/user-select

ブラウザサポート状況:
http://caniuse.com/#search=user-select

user-selectとは

(ざっくり言うと)HTML上の要素の選択を制御することができるプロパティです。

指定できる値

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

引用:
CSS を使って Web ページにおけるテキスト選択を防ぐ (または有効にする) 方法
https://msdn.microsoft.com/ja-jp/library/jj152140(v=vs.85).aspx

<応用発想> 要素のテキスト選択を「させる」

「テキスト選択をさせないため」のプロパティとして紹介されがちですが、逆に「テキスト選択をさせるため」として利用することもできます。

タブ切り替えのトリガーなど、JavaScriptで動きを制御している要素では「テキスト選択ができない」といった状況に陥っているものがあります。
そういった場合、該当要素に user-select: text; を設定することで、テキストが選択できるようになりました。