今日ハマったこと。
タイトルにもありますが、タッチデバイス制作時に使う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標準のタップカラーが適用されます。
以上でやんす。
コメント
同じことで困っていたので助かりました.
ありがとうございます!
ハマるとなかなか時間取られちゃいますよねw
お役に立てて良かったです(^^)