user-select
user-select は CSS のプロパティで、ユーザーがテキストを範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、クロームとして読み込まれたコンテンツには影響を与えません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 54 | 79 | 69 | 3 | 54 | 3 | |
all | 53 | 79 | 1 | 16 | 53 | 16 |
auto | 1 | 12 | 1 | 2 | 18 | 3 |
none | 1 | 12 | 21 | 2 | 18 | 3 |
text | 1 | 12 | 1 | 2 | 18 | 3 |
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
注釈 3件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (12)
- ベンダープレフィックス付きで対応: -ms- (12)
削除済み
- このバージョンで機能が削除されました (79)
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (49)
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
削除済み
- このバージョンで機能が削除されました (3)
対応条件
- ベンダープレフィックス付きで対応: -khtml- (2)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
注釈 2件
削除済み
- このバージョンで機能が削除されました (65)
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
基本構文
CSS
.no-select {
user-select: none;
}
.select-all {
user-select: all;
}ライブデモ
実務での使いどころ
-
UIラベルの選択防止
ダブルクリックやドラッグ操作でUIのラベルテキストが意図せず選択されるのを防止します。
注意点
- user-select: none をコンテンツテキストに適用すると、ユーザーがコピー＆ペーストできなくなり、ユーザビリティが低下します。
アクセシビリティ
- テキストの選択を無効にすると、支援技術のユーザーがコンテンツにアクセスしにくくなる場合があります。情報コンテンツには使用しないでください。