24
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-01-12

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

24
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?