[CSS] Androidでタップ時、オレンジの枠が消えない場合
webAndroidで何かしらの要素をタップした時やフォーカスが当たった時、オレンジ色の枠が表示されます(色は機種によって違うらしい)。
このオレンジのド畜生野郎が、案外デザインを邪魔してくるので、消してやろうといろいろ調べてみました。
ネット上に転がっている情報では消えなかった
#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-colorとbox-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に足しておけば憎きオレンジ枠は壊滅的ダメージを受けるであろう。