Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

概要

::selectionは、ユーザーがマウスドラッグやキーボード操作で選択したテキストのスタイルをカスタマイズする擬似要素です。color、background-color、text-decorationなどの限られたプロパティを設定できます。ブランドカラーに合わせたテキスト選択の配色変更やデザインの統一感向上に活用されます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1.1+
Firefox 62+

モバイル

Chrome Android 18+
Safari iOS 未対応
Firefox Android 62+

基本構文

CSS
::selection {
  background-color: #3498db;
  color: white;
}
p::selection {
  background-color: #e74c3c;
}

実務での使いどころ

  • テキスト選択色のブランドカスタマイズ

    テキスト選択時のハイライトカラーをブランドカラーに合わせ、サイト全体のデザインの一貫性を向上させます。

注意点

  • ::selectionで使用できるCSSプロパティは限定的で、color、background-color、text-shadow、text-decorationなどに限られます。

アクセシビリティ

  • 選択テキストの色と背景色のコントラスト比が十分であることを確認し、選択状態が視覚的に識別できるようにしてください。