テキストを選択したときの文字色や背景色を変更する

テキストを選択したときの文字色や背景色を変更する

CSSの::selection擬似要素を使って、テキスト選択時の文字色や背景色を変更する方法を調べました。
デザインに合わせて指定すると統一感が出て良さそうです。デフォルトの色だとデザインに埋もれてしまって見づらいという時にも使えそうです。

選択部分の文字色や背景色を変更するには::selection擬似要素を使います。
Firefoxはプレフィックスが必要なので、::selectionと::-moz-selectionの2つのルールを分けて書きます。

::-moz-selection {
color: #fff;
background: #39f;
}
::selection {
color: #fff;
background: #39f;
}

サンプル

この枠内の文字を選択すると、文字色 #333、背景色 #ffe164 でハイライトされます。
::-moz-selection {
color: #333;
background: #ffe164;
}
::selection {
color: #333;
background: #ffe164;
}

使いどころはよく分かりませんが、クラス名ごとに色を変えることもできます。

文字色 #fff、背景色 #64A0AB でハイライト

文字色 #fff、背景色 #F7DC9E でハイライト

文字色 #fff、背景色 #EB3B45 でハイライト

<p class="sample1">文字色 #fff、背景色 #64A0AB でハイライト</p>
<p class="sample2">文字色 #fff、背景色 #F7DC9E でハイライト</p>
<p class="sample3">文字色 #fff、背景色 #EB3B45 でハイライト</p>
.sample1::-moz-selection {
color: #fff;
background: #64A0AB
}
.sample1::selection {
color: #fff;
background: #64A0AB
}
.sample2::-moz-selection {
color: #fff;
background: #F7DC9E
}
.sample2::selection {
color: #fff;
background: #F7DC9E
}
.sample3::-moz-selection {
color: #fff;
background: #EB3B45
}
.sample3::selection {
color: #fff;
background: #EB3B45
}

参考サイト

::selection - CSS | MDN

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事