WebAmp.jp

HTML & CSS

CSSでテキストをハイライト(選択)時の背景色を変更

CSS3の擬似要素「::selection」の紹介
テキストハイライト時の背景色を変更して可視化性、サイトの統一性を向上しよう。

css_text_over

CSS設定

色々説明したいところですがそれは後で説明するとして、まずはサクッとハイライト用の記述を紹介します。

CSS

	::selection {
		background: #EDA184;
	}

	//Firefox用ベンダープレフィックス
	::-moz-selection {
		background: #EDA184;
	}

個別にpやdiv、id、classにハイライトさせたい場合はp::selection {}のようにすれば設定も可能です。
あと、背景だけでなく文字色の変更も可能です。

ところで素朴な疑問なんですがFirefox用のベンダープレフィックス入るのになんでwebkit用のプレフィックスはいらないんでしょうか?
(-webkit-を入れなくてもSafari・Chromeは対応されています。)

ちなみにこのサイトでも設定しているのでデモ代わりに一度選択して確認してみてください。

対応ブラウザ(2013/08 現在)

  • Chrome
  • Safari
  • Firefox
  • IE9〜

自分なりの考察

小技としてよく紹介されている技術ですが、はっきりと言ってしまえば別にデフォルトのままでも何も問題ない設定です。
ただ、設定することによって選択時の可視化性、サイト全体の統一性が向上されると思います。(極端な話ハイライトカラーと同じサイトカラーの場合は見えなくなるわけですし)
まだまだ設定していないサイトも少ないし差別化にもつながるかも?

Web制作を仕事にしている方や目指している方は特にサイトの細部にまでこだわれるようにしていきたいですね。