webfeelfree

文字選択(テキストハイライト)したときに背景色や文字色を変更するCSS

  • WEB

文字を選択(テキストハイライト)した状態
文字選択(以下、テキストハイライト)されたときに背景色や文字色を変更する方法を、メモ代わりにご紹介。
基本、Webページの文字をテキストハイライトしたときは、背景色は【ブルー系】、文字色は【白】で選択されるようデフォルトで決まっています。

何気ないところの見えないお洒落も大事?でも、結構、Webページをコピペするときなど、テキストハイライトする場面がありますよね!?
そんなときに閲覧者に「おっ!」っと思わせたい方用です。

というか、私は、初めて見たころ「おっ!」って思ったんですもんw

基本のコーディングは、これ!!
背景色と文字色を決めて、このままCSSに記述すればOKです。
簡単です。

::selection {
    background: #ff7f00; /*背景色*/
    color: #333333; /*文字色*/
}
::-moz-selection { /*for Firefox*/
    background: #ff7f00; /*背景色*/
    color: #333333; /*文字色*/
}

ちょっと応用編?
上記の記述だと、テキストハイライトしたときに、リンクの文字色も同じ文字色になってしまうので、リンクのは違う文字色になるように記述してみました。

::selection {
    background: #ff7f00; /*背景色*/
    color: #333333; /*文字色*/
}
::-moz-selection { /*for Firefox*/
    background: #ff7f00; /*背景色*/
    color: #333333; /*文字色*/
}
a::selection {
    background: #ff7f00; /*背景色*/
    color: #ffffff; /*文字色*/
}
a::-moz-selection { /*for Firefox*/
    background: #ff7f00; /*背景色*/
    color: #ffffff; /*文字色*/
}

ちなみにテキストハイライト時のリンク色のデフォルトは、文字色と同じ【白】です。

補足的なところで・・・
部分的にテキストハイライトを変更したいときは、セレクターやclassで細かく設定してあげるのも、1つの手かと思います。

p::selection {
    background: #ff7f00; /*背景色*/
    color: #333333; /*文字色*/
}
p::-moz-selection { /*for Firefox*/
    background: #ff7f00; /*背景色*/
    color: #333333; /*文字色*/
}
.textHighlight::selection {
    background: #ff7f00; /*背景色*/
    color: #333333; /*文字色*/
}
.textHighlight::-moz-selection { /*for Firefox*/
    background: #ff7f00; /*背景色*/
    color: #333333; /*文字色*/
}

ただ、不必要にやりすぎてしまうと、UI的に不親切になると思うので、やりすぎに注意です >< 最後に注意して欲しいことが、2点ほど・・・ 1点目は、「::selection」セレクタは、CSS3から削除されています。 これは、何を意味するかというと・・・今後、突然、テキストハイライト色の変更が適用されなくなる【かも】ということです。 あくまで、【かも】・・・今は、変更が適用されていますので紹介してみました。 逆に、またCSS3に追加されるということもあるかもしれません。 なんだか複雑ですね。 CSS3 / テキストを選択した際のハイライト表示のコントロールが|乱雑モックアップ

2点目は、旧ブラウザに対応してないことがあります。
IE8以下は、対応していません。

上手く使って、見えないお洒落で、閲覧者に「おっ!」っと思わせてみてはいかがでしょうか?
こういった点で、閲覧やデザインの楽しみも増えますね♪

最新記事

読まれている記事

ツイッター

カテゴリー