スポンサーリンク
CSS

スマホでタップした時に一瞬出るハイライト表示をCSSで消す方法。さらにハイライト表示の色を変える方法

この記事は約1分で読めます。
スポンサーリンク

どうも、サブロー(@saburo_design)です。

どうも、サブロー(@saburo_design)です。

スマホでタップした時に一瞬出るハイライト表示があると思います。それをCSSで消す方法です。

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

rgba(0, 0, 0, 0)の4つの数字の部分で色と透明度を指定しています。

左から赤(r)緑(g)青(b)アルファ(a)です。上記の例ではアルファを0ゼロにしているので色に関わらずハイライトが見えないようになっています。アルファを0.0~1.0の間で指定し、加えて色も指定すれば、タップ時のハイライトをデフォルトの色から変更する事も可能です。

ハイライトを見えないようにして、かつマウスオーバー時のスタイルなどを適用していない場合、ユーザーからしてみればタップしても一見何も反応が無いので、自分がタップしたかどうかが分かりづらいという事があります。使う際は本当に必要かどうか良く検証してからにしてください。

スポンサーリンク

美味しいものを食べに行ったり技術録を書いたり。最近ブログ用のデジカメを買って浮かれています。ツイッターとかインスタグラムもやってますのでフォローもお気軽にどうぞ。

サブローをフォローする
SABURO DESIGN
タイトルとURLをコピーしました