[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート
Post on:2011年12月9日
sponsors
テキストの選択した箇所のハイライトカラーを変更するCSS3の小ネタを紹介します。
というわけで、この記事だけp要素のハイライトカラーを変更しました。
[ad#ad-2]
テキスト選択時のハイライトのカラーを変更するスタイルシート
選択したテキストのスタイルを変更するには、「::selection」を使用します。
CSS
p::selection {
background: #FFAE10;
}
このままではFirefoxでは表示されないので、Firefox用の記述を加えます。
CSS
p::selection {
background: #FFAE10;
}
p::-moz-selection {
background: #FFAE10;
}
このシンプルな記述で、テキスト選択時のハイライトのカラーを変更できます。
[ad#ad-2]
対応ブラウザは下記の通りです。
- Chrome
- Safari
- Firefox
- Opera
- IE9+
備考：WordPressの記事ごとに異なるCSS, JSを使用する方法
WordPressで記事ごとに異なるスタイルシートやスクリプトを使用するのには、「Custom CSS and JS」が便利です。
インストール方法・使い方は、下記記事をご覧ください。
sponsors
