HTML & CSS

最終更新日:
公開日:

レシピ

テキスト

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

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

この記事のポイント

  • テキストの選択範囲を目立たせて分かりやすくする

テキストの選択範囲にCSSを適用する

テキストコンテンツはコピー&ペーストするときなどに選択範囲を指定しますが、擬似要素「::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以降から使用可能です。
タブレットやスマホは対応していません。