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

CSS

2020年07月09日 8:00　

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

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

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

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

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

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

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

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

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

疑似要素「selection」とは

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

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

::selection{
 background: #ffe8d1;
}
::-moz-selection{
 background: #ffe8d1;
}

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

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

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

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺