ハイライトの色を変更する「::selection」

テキストを選択した際に色付けされるハイライトカラーを好きな色にする方法をメモしておきます。

デフォルトの設定では一般的に下の画像のような青色「#328efd」で表現されているかともいますが、各々のサイトカラーに合う色に出来たらちょっとしたオリジナルの表現になりますね。

 

デモサンプル

1.CSSで指定する

ハイライトカラーを変更するには「::selection」セレクタを使用します。

 これだけですと、Firefoxでは対応してくれないので下記のように追記します。

 

2.完成

対応しているブラウザとバージョンが限られますので、その点には注意してください。