テキスト選択時のハイライトカラーを好きな色に変更するCSS
サイトやページ内のテキストで書かれた部分を選択したときの色を任意の色に変更するCSSです。
環境によって多少の違いはありますが、デフォルトのままだとどうしても味気ない。出来ればサイトやページのデザイン、雰囲気を損なわないような色にしてあげたいものです。
既存のサイト、ページにも簡単に取り込めるので興味があったら是非試してみてください。
ハイライト時の色を変更するCSSの実装方法
選択したテキストのスタイルを変更するには、「::selection」という疑似要素を使用します。
p::selection {
background: #f00;
}ただ、このままではfirefoxで見たときに適用されないので、ベンダープレフィックスもつかって次のような記述にします。
p::selection {
background: #f00;
}
p::-moz-selection {
background: #f00;
}
See the Pen
zbXqGZ by keitasakurai (@mdesignyokohama)
on CodePen.
