Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away