レシピ

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

  • このエントリーをはてなブックマークに追加

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

この記事のポイント

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

テキストの選択範囲に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以降から使用可能です。
タブレットやスマホは対応していません。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ