CSSでテキストの選択部分の背景色を変える

CSSの::selectionという疑似要素を使うとテキストの選択部分の色を変えることができます。IE11を含めて主要なモダンブラウザで使用可能です。

上の画像は以下のようなCSSを指定した例です。

p::selection {
  background-color: yellow;
}

実際にサンプルも用意してみました。

::selectionで指定できるプロパティは一部のみ

ちなみに.example::selection { font-weight: bold; } のように選択部分のテキストのウェイトを変えることはできません。::selectionの中で使えるCSSプロパティには制限があるからです。

::selectionと合わせて使えるもの

• color
• background-color
• text-decoration
• text-shadow
• cursor
• caret-color
• outline
• text-emphasis-color

たとえばbackground-imageやfont-weight、font-sizeは使えません。これは合理的な仕様だと思います。例えばfont-weightを指定できるようにした場合、選択部分のフォントの幅が変わってしまい、文章がガタッと改行されてしまう、みたいなことが起きてしまいます。

基本的には::selectionの中で指定するのはbackground-colorとcolorだけにしておくのが良いでしょう。