【CSS3】テキスト選択時のハイライトのカラーを変更する方法。

Ads by Google

CSS3を用いて選択したテキストのスタイルを変更する方法を紹介します。

::selection {background:#1aa;}

基本的にはこの一行で変えることができます。

ただし。このままだとFirefoxには対応していないようなので、以下の記述を追加します。

::selection {background:#1aa;}
::-moz-selection {background:#1aa;}

対応ブラウザは以下の通り。

  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE9+

選択部分の強調は、通常の観覧時には誰も気づかない細かな装飾です。
テキストを選択する必要がある方はかなり少数派でしょうからね。
しかし、あるのとないのとでは印象も評価も大きく変わってきます。

『神は細部に宿る』
そんな言葉がピッタリのスタイルシートの使い方でした。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

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