現役エンジニア・デザイナーの備忘録ブログ

2020.4.28 / 更新日: 2022.1.10
HTML・CSS

テキスト選択時(反転)の色を変える【CSS】

::selectionを使うと、テキストを選択したときの色を変えることができます。

 

See the Pen
VwvWQxg
by nanami (@nanami_po)
on CodePen.

文字の色、背景、シャドウなどが指定できます。

 

See the Pen
pojwaRb
by nanami (@nanami_po)
on CodePen.

See the Pen
KKdqQVV
by nanami (@nanami_po)
on CodePen.

 

ぱっと見ではわからない装飾ですが、細部にまでこだわることでサイトの完成度がグッとあがりますね。

ちなみに、Firefoxに対応させる場合はベンダープレフィックス付きの::-moz-selectionを指定しないと適応されません。また、IE8以下は未対応です。

 

よかったら参考にしてください。
 

関連記事