CSSでテキスト選択のハイライトカラーを変更する
最終更新日: Update!!
今回はかなり細かい小ネタになりますが、大きな印象付けができるテクニックになります。タイトルの通りですが、テキストの選択時にハイライトされる背景色をCSSを使って変更するというものです。
テキストを選択させる機会もあまり無いかと思いますが、デザインのアクセントになりますので、設定しておいて損はないかと思います。実装方法も簡単ですので、気軽に試してみてはいかがでしょうか。では早速コードになります。
// HTML <p class="highlight">この文章を選択すると、通常とは異なるハイライトカラーで表示されます。 </p> // CSS .highlight::selection, .highlight::-moz-selection { background: #f00; color: #fff; }たったこれだけで、ハイライトカラーを変更することができます。実装方法ですが、CSSで対象の要素に「::selection 疑似要素」として設定するだけです。古いFirefoxに対応させる場合にはベンダープレフィックスを付ける必要があります。ちなみに背景色だけでなく文字色も変更することができます。実際に下記のテキストを選択してみてください。
このテキスト部分のみ、選択するとハイライトカラーが変わってるのが確認できます。
かなり細かいデザインになりますが、アプリなどのUIデザインにおいては、より強調させたいときに使えるのではないでしょうか。もちろんデザイン面でもオリジナリティを表現できるので使いどころはたくさんありそうですね。sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories