[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に足しておけば憎きオレンジ枠は壊滅的ダメージを受けるであろう。