2020.4.28
html-css

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

  • 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以下は未対応です。

 

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

Share Please

Read this too