[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート

テキストの選択した箇所のハイライトカラーを変更するCSS3の小ネタを紹介します。
というわけで、この記事だけp要素のハイライトカラーを変更しました。

サイトのキャプチャ

CSS3 Text Selection Trick

テキスト選択時のハイライトのカラーを変更するスタイルシート

選択したテキストのスタイルを変更するには、「::selection」を使用します。

CSS

p::selection {
background: #FFAE10;
}

このままではFirefoxでは表示されないので、Firefox用の記述を加えます。

CSS

p::selection {
background: #FFAE10;
}
p::-moz-selection {
background: #FFAE10;
}

このシンプルな記述で、テキスト選択時のハイライトのカラーを変更できます。

対応ブラウザは下記の通りです。

  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE9+

備考:WordPressの記事ごとに異なるCSS, JSを使用する方法

WordPressで記事ごとに異なるスタイルシートやスクリプトを使用するのには、「Custom CSS and JS」が便利です。
インストール方法・使い方は、下記記事をご覧ください。

top of page

©2017 coliss