[CSS] Androidでタップ時、オレンジの枠が消えない場合

web

Androidで何かしらの要素をタップした時やフォーカスが当たった時、オレンジ色の枠が表示されます(色は機種によって違うらしい)。
このオレンジのド畜生野郎が、案外デザインを邪魔してくるので、消してやろうといろいろ調べてみました。

ネット上に転がっている情報では消えなかった

#honyarara {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

これで消えるぞ!的な情報がごろごろ出てきますが、これだとしぶとく表示されます。
驚異的生命力。Gかよ。

これで消えた

#honyarara {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

どうやらあの忌まわしきオレンジのド畜生はbox-shadowで表示されているらしく、tap-highlight-colorでは!importantしようが何しようが消えてくれないのです。
Android界隈には暗いので、これが機種差なのかOSバージョン差なのかは分からないけれど、ともかくtap-highlight-colorbox-shadowを併記しておけばだいたい消えてくれるはず……。
さらに、Androidのアプリ(Webview)では、outlineで表示されている場合もあるらしいので、outline: noneも書いておけばもう安心ですね(たぶん)。

いちいち指定するのがめんどい人は

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}

全称セレクタ(*)は非推奨だのなんだのと散々騒がれているけれど、めんどいものはめんどい。
これをCSSに足しておけば憎きオレンジ枠は壊滅的ダメージを受けるであろう。

目次へ戻る