CSS
カーソルでテキスト選択時のハイライト色を変更する方法
2020年07月09日 8:00
おはようございます！社員Aです👩
今回は、カーソルでテキスト選択時の文字色を変更する方法をご紹介します。
たまに参考サイトをパトロールしていると、マウスでドラッグしたときの色が可愛らしいときがあります。
ちょっとしたことですが、こだわりを感じられますね。
今回はこのテキスト選択時の色を変更するテクニック（超簡単）をご紹介します。
通常ハイライト色とカスタマイズしたハイライト色
通常ハイライトとカスタマイズした参考をまずはご覧ください。
通常ハイライト
一般的にはマウスでドラッグすると、水色のハイライト色になります。
カスタマイズしたハイライト
CSS3の疑似セクション「selection」を使うと、自由にハイライト色が変えられます。
CSS3の疑似セクション「selection」を使う
今回は、CSS3の疑似セクション「selection」を使います。
疑似要素「selection」とは
CSS の ::selection 疑似要素は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。
下記のソースコードの「backgroud:xxx」部分を変更するだけで、お好きなハイライト色に変更できます。
::selection{
background: #ffe8d1;
}
::-moz-selection{
background: #ffe8d1;
}
::-moz-selectionはFirefoxに対応させるためのものです！
使う色には注意を
かんたんに変えられるハイライト色ですが、色によってはテキストが見づらくなる場合もあります。
- 濃すぎる色を使わない
- 文字が読めるかテストをする
上記を意識して、工夫してみましょう！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
