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

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; を設定することで、テキストが選択できるようになりました。