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