【CSS】Androidでボタンをタップした時に表示される枠線を削除する方法

ボタンに限ったことではありませんが、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 でボタンタップ時に表示されるオレンジ色の枠線を削除する方法でした。
どなたかのご参考になれば幸いです。

  •  この記事いいね! (0)
>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7 浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください。

CTR IMG