テキスト選択時の背景色や文字色をCSSで変更する方法

WEBサイト内のテキストを選択した時の背景色や文字色をCSSで変更する方法をご紹介いたします。

テキスト選択時の背景色や文字色をCSSで変更する方法

どのブラウザでも大体テキスト選択時は、背景色が青色、文字色が白色になりますね。「::selection」を使うと、簡単にテキスト選択時の背景色や文字色を変更することができます。

::selection {
  background: #FF0000;
  color: #fff;
}

::-moz-selection { /* Firefox用 */
  background: #FF0000;
  color: #fff;
}

例えば、上記のようにCSSを追加すれば、テキスト選択時の背景色が赤色、文字色が白色になります。

特定の部分だけに適用することもできます。

.sample::selection {
  background: #FF0000;
  color: #fff;
}

.sample::-moz-selection { /* Firefox用 */
  background: #FF0000;
  color: #fff;
}

なお、::selectionで指定できるプロパティは、以下の通りです。

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

何でも指定できるわけではないので、ご注意ください。

あとがき

細かい部分ですが、::selectionを使うことで、オリジナリティのあるサイトにすることができますね。テキスト選択時の挙動を変更したい場合は、ぜひ参考にしてください。