CSS 文字選択範囲の背景に色を変更したり、文字色を変更する方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回のtipsは【CSS 文字選択範囲の背景に色を変更したり、文字色を変更する方法】に関してです。当ブログでも取り入れていますがテキストを選択した部分には配色が付き文字色も変わっているかと思います。選択部分の強調はちょっとした装飾で、あるとないでは印象も変わってくるかと思います。使いこなせばもっとデザインの幅も広がるかもしれませんね。

実装方法


::selection {background: #000; color: #fff;}
::-moz-selection {background: #000; color: #fff;}

基本点には以上2行で実装できます。他にもh1タグのみ変更したり、pタグのみ変更したりと個別に対応させる事も可能です。

pタグへの指定

p{color: #000;}
p::selection {background: #000; color: #fff;}
p::-moz-selection {background: #000; color: #fff;}
h1タグへの指定

h1{color: #000;}
h1::selection {background: #000; color: #fff;}
h1::-moz-selection {background: #000; color: #fff;}
特定クラスへの指定


.highlight{color: #000;}
.highlight::selection {background: #000; color: #fff;}
.highlight::-moz-selection {background: #000; color: #fff;}

以上になります。