コピペで簡単 CSS テキストのハイライトカラーを変更する方法

コピペで簡単 CSS テキストのハイライトカラーを変更する方法

CSS でテキストのハイライトカラー(選択色)を変更する方法を紹介します。

ハイライトカラーを変更するには、CSS の擬似要素 ::selection を使用します。
次のコードは、テキストカラーを白(#fff)、ハイライトカラーを黒(RGBカラー指定で0,0,0)の不透明度を80%にした場合の表示方法です。

::selection {
color: #fff;
background: rgba(0,0,0,.8);
}

不透明度が必要なければ #000 などに変更してください。
Firefox に対応する場合は ::-moz-selection を使用します。

::-moz-selection {
color: #fff;
background: rgba(0,0,0,.8);
}
::selection {
color: #fff;
background: rgba(0,0,0,.8);
}

まとめ

CSS でテキストのハイライトカラーを変更する方法を紹介しました。