-webkit-tap-highlight-color は CSS の標準外のプロパティで、リンクがタップされている間に表示される強調色を設定する。強調は、ユーザーがタップしたことが正常に認識されていることを示し、またどの要素がタップされているかを示す。
タップされている間に表示される強調色をなくすには、以下のCSSを記述する。
a {
-webkit-tap-highlight-color: transparent; /* 強調をなくす */
}
逆に色を変更したい場合は、下記のように色を直接指定するだけでよい。
a {
-webkit-tap-highlight-color: red;
-webkit-tap-highlight-color: rgba(200, 164, 84, 0.4);
}
完全に消すのがユーザビリティの観点から良くないと判断される場合はoutlineやbox-shadowなどの別の代替策でタップ動作を強調するのも手。
またCSSでボタンやタブを制御するのではなく、JavaScriptを使いタッチイベントをハンドリングすればより操作タイミング別で強調が可能である。