2017-10-18

iOS や Android でリンクをタップした時に灰色の背景色が付くのをなくす CSS

iOS や Android で Web ページのリンクをタップし続けた時に、灰色の背景色 (ハイライトカラー) が付く。どこをタップしたのかユーザが分かりやすくなるので普段は見えていてもいいと思うが、気になるようであれば以下のような CSS でハイライトを消すことができる。

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Android の場合はハイライトカラーの変更ができないので上述のコードのみ有効だが、iOS であれば色を変更することもできる。

a {
  /* カラーコードを指定したり */
  -webkit-tap-highlight-color: #ff0000;
  /* rgba で指定したり */
  -webkit-tap-highlight-color: rgba(0, 0, 255, .5);
}