ボタンに限ったことではありませんが、Android 端末でボタンをタップした際に表示されるオレンジの枠線を削除する方法についてです。
ページデザインが全体的に青で統一されていたので、オレンジ色がそぐわなくて消したかったんですよね。
あと、ボタンは円形なのに枠は正方形なので、それも違和感がありました。
ちなみに、Webページではなく、Cordova アプリです。
今回参考にさせていただいた記事はこちらから。
[CSS] Androidでタップ時、オレンジの枠が消えない場合｜metrograph.jp
https://metrograph.jp/css_android_orange/
さて、実装のためのコードは下記のとおりです。
button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: none;
}
記事に乗っていたサンプルコードでは、box-shadow: none; という記述もありましたが、現行のデザインに影響するので、そちらは削除しました。
なお、削除してもオレンジの枠線は消えましたので、問題なし！
記事によると、2行目の -webkit-tap-highlight-color: rgba(0,0,0,0); だけでは消えないらしいので、
outline: none; も重要なのかも？
Android では動作確認できたので、後ほど iOS でも、きちんと動作するか確認する予定です。
以上、Android でボタンタップ時に表示されるオレンジ色の枠線を削除する方法でした。
どなたかのご参考になれば幸いです。
