user-select

概要

user-select はテキストの選択動作を制御し、none で選択不可、all でクリック一つで全選択、text で通常の選択を許可します。UIボタンやラベルの誤選択防止、コードスニペットのワンクリックコピーなどに活用されます。ドラッグ操作のあるUIでのテキスト選択干渉も防止できます。

対応ブラウザ

基本構文

.no-select {
  user-select: none;
}
.select-all {
  user-select: all;
}

実務での使いどころ

• UIラベルの選択防止

  ダブルクリックやドラッグ操作でUIのラベルテキストが意図せず選択されるのを防止します。

注意点

アクセシビリティ

• テキストの選択を無効にすると、支援技術のユーザーがコンテンツにアクセスしにくくなる場合があります。情報コンテンツには使用しないでください。

参考リンク

• MDN Web Docs — user-select
• Can I use — user-select