テキスト選択時(ドラッグ)時に背景色を変えたらWebKit系ブラウザ(Chrome/Safari)だけ色がちょっと違かった話

テキストを選択(ドラッグ、ハイライト)した時の色ってCSSで変えられるんですよね。
普段あまり変えることがないのですが、たまたま必要な機会があった時に「あれ、Chomeで色が暗いぞ?」と気づいた話。
小ネタとしてメモしておきます。

選択時の背景色とか文字色の変え方

参考:「::selection – CSS | MDN」


::selection{
background: #059;
color: #eee;
}
::-moz-selection{
background: #059;
color: #eee;
}

これだけです。::selection 擬似要素というそうです。
Firefox(Gecko)はプレフィックス(-moz-)が必要です。
color、background、background-color、text-shadowのみ使えます。
ただし、そもそも非標準なので、将来的にサポートされないかも?

※2017/02/16時点、IE11およびその他は現時点最新バージョンにて確認。

続きを読む