AndroidでBootstrapで作ったサイトのナビバーをタップした時に出るオレンジ色の枠を消す方法

Androidのブラウザでタップした時に出るオレンジの枠。これがデザイン的にどうもじゃまくさい。

Bootstrapを使ったサイトのナビバーに出るこれを消す方法をメモ。

Bootstrapの実例でいうとこの場所の「.navbar-toggler」。

以下のCSSを設定しておけば大丈夫。

.navbar-toggler:focus {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}

focus指定しないとあの枠は消えません。

他にも消したい場所がある場合はそれぞれ設定すればOK！