カーソルでテキスト選択時のハイライト色を変更する方法

         

CSS

カーソルでテキスト選択時のハイライト色を変更する方法

2020年07月09日 8:00 

カーソルでテキスト選択時のハイライト色を変更する方法

おはようございます!社員Aです👩

今回は、カーソルでテキスト選択時の文字色を変更する方法をご紹介します。

 



 

たまに参考サイトをパトロールしていると、マウスでドラッグしたときの色が可愛らしいときがあります。

ちょっとしたことですが、こだわりを感じられますね。

今回はこのテキスト選択時の色を変更するテクニック(超簡単)をご紹介します。

 

通常ハイライト色とカスタマイズしたハイライト色

通常ハイライトとカスタマイズした参考をまずはご覧ください。

通常ハイライト

一般的にはマウスでドラッグすると、水色のハイライト色になります。

 

カスタマイズしたハイライト

CSS3の疑似セクション「selection」を使うと、自由にハイライト色が変えられます。

 

 



CSS3の疑似セクション「selection」を使う

今回は、CSS3の疑似セクション「selection」を使います。

疑似要素「selection」とは
CSS の ::selection 疑似要素は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。

 

下記のソースコードの「backgroud:xxx」部分を変更するだけで、お好きなハイライト色に変更できます。

::-moz-selectionはFirefoxに対応させるためのものです!

 

 

使う色には注意を

かんたんに変えられるハイライト色ですが、色によってはテキストが見づらくなる場合もあります。

  1. 濃すぎる色を使わない
  2. 文字が読めるかテストをする

上記を意識して、工夫してみましょう!

 

関連記事

この記事を書いた人

社員A

社員A

入社6年目。フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。 一人旅が好きで、主に東南アジアを周っています。旅行が好きな方、おすすめスポットがあればぜひ教えて下さい!