CSSのtap-highlight-colorが効かない時の対処法

tap-highlight-color

今日ハマったこと。

タイトルにもありますが、タッチデバイス制作時に使うcssの「tap-highlight-color」が効かない現象が発生。タップしてもリンク領域の色がなーーんも変化しない。押したのかも分からないし、どこをタップしたのかもわからない。

ググっても出てくる記事は、以下のような記述でtap-highlight-colorの指定ができますよって内容ばかり。

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

でも、僕の場合はこれを指定しても効きません・・・。

タップした時に出るタップ領域を示すOS標準のハイライトカラーすら付かない。

ぬーん、困った。と隣の席のデザイナーに聞いたら、「カーソルつけると効くよ!」とのこと。そうなんです、僕の場合はそもそもa要素じゃなくspan要素とかでリセットボタンを作っていたので、tap-highlight-colorのデフォルトの薄いグレーすらも付かなかったのです。

なのでspanかなんかに適当なクラス名をつけて、こんな記述をしてあげれば、ちゃんとハイライトされるようになります。

.btn-reset{
-webkit-tap-highlight-color:rgba(0,0,0,0);
cursor:pointer;
}

タップ時の色を変える必要がない時は、-webkit-tap-highlight-colorの1行も必要ありません。iOSやAndroid標準のタップカラーが適用されます。

以上でやんす。

スポンサーリンク
レクタングル(大)
レクタングル(大)
スポンサーリンク
レクタングル(大)

コメント

  1. phi より:

    同じことで困っていたので助かりました.
    ありがとうございます!

    • ぴーくん より:

      ハマるとなかなか時間取られちゃいますよねw
      お役に立てて良かったです(^^)