選択したテキストの選択範囲の色を変える

テキストを選択状態にしたときの文字色と背景色を設定する方法について解説します。

この記事のポイント

テキストコンテンツはコピー＆ペーストするときなどに選択範囲を指定しますが、擬似要素「::selection」を使うとそのエリアにCSSを適用することができます。

::-moz-selection {
  color: #ed1644;
  background-color: #ffdee5;
}
::selection {
  color: #ed1644;
  background-color: #ffdee5;
}

Firefoxのみプレフィックスをつける必要があり、「::-moz-selection」の形で指定する必要があります。

擬似要素「::selection」で使用できるのはcolorプロパティ、background-colorプロパティ（backgroundプロパティで背景色のみ指定する形でも可）、text-shadowプロパティの3つです。

2018年8月10日現在、PCの主要なブラウザでのみサポートされており、IEもバージョン9以降から使用可能です。
タブレットやスマホは対応していません。