• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

通常のハイライトカラー

デフォルトはこんな感じで青色です。
[CSS]文字を選択した時のハイライトカラーを変更する方法

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

CSS3 の ::selection を利用すれば、ハイライト時の背景色やテキストの色を変更できます。
.hoge::selection	{
	background: #e00079;
	color:#fff;
}

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

こんな感じでハイライトカラーが変わりました。
[CSS]文字を選択した時のハイライトカラーを変更する方法

::selection のデモサイト

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

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください