【CSS】テキストを選択した際の色を変える

ページ内に表示されているテキストを選択したとき、その部分には青系の色がかかると思います。この選択されている箇所を示す際の色をCSSを利用して自由に変更する方法を紹介します。

選択範囲の色を変えるには？

通常であれば、選択されている箇所には下図のような色が表示されるはずです。

これを「::selection」という要素を使うことで好きな色に変更することができます。

p::selection{
  background:#34ebc3;
  color:#fff;
}

指定する内容は単純で、選択される背景色はbackgroundプロパティ、文字色はcolorプロパティを使って指定するだけです。

以上が、CSSを使って選択されているテキストの色を変更する方法となります。