0

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

selection

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

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

 

デモサンプル

selection-img1

1.CSSで指定する

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

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

 

2.完成

selection-img2

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

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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