スポンサード

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

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

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

通常のハイライトカラー

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

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

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

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

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

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

::selection のデモサイト

簡単にデモサイトを用意しました。

マウスでぐいっとなぞると、ピンク色に反転します。
::selection のデモ

スポンサード