スマートフォンでリンクやボタンをタップした際に clickable なエリアがハイライトされます (iOS Safari だとグレー / Android for Chrome だと青)
通常のリンクやボタンはそのままで良いのですが、モーダルのエリア外をタップした際にモーダルを閉じさせたいなどの場合、画面全体に一瞬ハイライトが出てしまうので見た目が良くなくハイライトを消したかった
-webkit-tap-highlight-color: transparent でハイライト (強調) を消せる
.overlay { -webkit-tap-highlight-color: transparent; }
サイト全体でハイライトの色を変更したい場合は色指定できる
a, button, input, textarea, select { -webkit-tap-highlight-color: rgb(228 184 43 / 0.6); }
所感
CSS 知らないプロパティいくらでもあるから永遠に勉強だな〜ってなった
アクセシビリティ的にハイライトはあったほうが良いと思うのでサイト全体で消すとかはしないほうが良いんじゃないかなと思っている
このハイライトを表示させないように a や button ではなく div に onClick を付けてしまう方法もあると思うが、フォーカスができなくなるのでクリックできる要素を用いるほうが良いと思う
[参考]
