[CSS]マウスでドラッグした際の文字を選択範囲の色（ハイライトカラー）を変更する方法

CSSスニペット

2013.03.24

マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。

通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3の擬似要素selectionを用いることでこのハイライトカラーを変更することができます。

CSS3なのでIEでは…です。(´・ω・｀)

通常のハイライトカラー
::selectionで背景色と文字色を変更
::selectionのデモサイト

通常のハイライトカラー

デフォルトはこんな感じで青色です。

::selectionで背景色と文字色を変更

CSS3の::selectionを利用すれば、ハイライト時の背景色やテキストの色を変更できます。

.hoge::selection	{
	background: #e00079;
	color:#fff;
}

/*Firefoxに対応*/
.hoge::-moz-selection 	{
	background: #e00079;
	color:#fff;
}

.hoge::selection {

background: #e00079;

color:#fff;

}

/*Firefoxに対応*/

.hoge::-moz-selection {

background: #e00079;

color:#fff;

}

こんな感じでハイライトカラーが変わりました。

::selectionのデモサイト

簡単にデモサイトを用意しました。
マウスでぐいっとなぞるとピンク色に反転します。

::selection のデモ