CSSで文字を選択(ドラッグ)した時の背景色を変える

WEBサイトのテキスト部分の可視性をアップしてくれるCSSテクニックをご紹介します。
まだ使えるブラウザは限られていますが、とても簡単に実装できるのでおすすめです。

drag

対応ブラウザ(2012/1時点)

  • Chrome16
  • Safari
  • Firefox
  • IE9

主要なブラウザは対応しているのでひとまず安心して使えそうです♪
このサイトでも利用しています。

使い方

CSS
/* = Selected Text
----------------------------------------------- */
::selection {
	background:#d4dcd6; /* Safari */
}

::-moz-selection {
	background:#d4dcd6; /* Firefox */
}

このコードをCSSファイルのわかりやすい箇所にコピペしてお使い頂ければ完成!
カラーはお好みのものに差し替えるだけです。

とっても簡単なのに、文字の可視性がグンとアップします!
ぜひ使ってみて下さいね♪

Comments

  • 初コメントです。
    こちらの記事を読んで自分のサイトに適応させてみました。
    ありがとうございます!

    2014年9/2

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です