• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

【CSS】テキストを選択したときの色(背景・文字)を変える方法

投稿者アイコン
2018/10/17
書いた人:
rurippa!
カテゴリ:
CSS
8,978 views

テキストを選択(ドラッグ)したときのハイライトカラーを変える方法です。

【CSS】テキストを選択したときの色(背景・文字)を変える方法

凄い細かいお話ですが・・・!
テキストを選択(ドラッグ)したときのハイライトカラーって、実は簡単に変えれるんです♪

どんなときに使うの?

・デフォルトで使われているハイライトカラーが、サイトのカラーと合わない気がする
・デフォルトのハイライトカラーと、サイトの背景色が似ていて、文字を選択してもわかりづらい
など。

もしこんな状況があれば、使ってみてはいかがでしょうか。

実際にやってみよう!(サンプルあり)

webサイト内の全テキストでも、一部のテキストでも、
色を変えたい部分に::selectionをつけるだけ!
サンプルも用意しているので、文字を選択しみてくださいね。

サンプル1(背景の色変え)

サンプルです!テキストを選択してみてください。

          <p>サンプルです!テキストを選択してみてください。</p>
          
          <style>
          p::selection {
            background: #ffc867;
          }
          </style>
          

サンプル2(文字の色変え)

サンプルです!テキストを選択してみてください。

          <p>サンプルです!テキストを選択してみてください。</p>
          
          <style>
          p::selection {
            color: #A3D499;
          }
          </style>
          

サンプル3(背景と文字の色変え)

サンプルです!テキストを選択してみてください。

          <p>サンプルです!テキストを選択してみてください。</p>
          
          <style>
          p::selection {
            background: #333;
            color: #fff;
          }
          </style>
          

まとめ

結構細かいポイントの話ですが、なかなか面白いと思うのでぜひお試しください(*^^*)


この記事を読んだ人はこんな記事も読んでいます