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

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

どんなときに使うの？

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

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

実際にやってみよう！（サンプルあり）

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

サンプル１（背景の色変え）

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

          <p>サンプルです！テキストを選択してみてください。</p>
          

          <style>
          p::selection {
            background: #ffc867;
          }
          </style>
          

サンプル２（文字の色変え）

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

          <p>サンプルです！テキストを選択してみてください。</p>
          

          <style>
          p::selection {
            color: #A3D499;
          }
          </style>
          

サンプル３（背景と文字の色変え）

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

          <p>サンプルです！テキストを選択してみてください。</p>
          

          <style>
          p::selection {
            background: #333;
            color: #fff;
          }
          </style>
          

まとめ

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