スマホサイトでリンクをタップすると、iPhone（iOS）ならリンク周りにグレーの影が、Androidであればリンクの周りにオレンジの枠が表示されると思います。
このグレーの影やオレンジの枠（ハイライト表示）をCSSの-webkit-tap-highlight-colorで無効にしたり、ハイライトカラーを変更する方法をまとめました。
iPhone（iOS）
ハイライトカラーを無効化
まずはiPhone向けにハイライトカラーを「無効」にする場合、CSSで以下のように記述します。|
1 2 3 |
a { -webkit-tap-highlight-color:rgba(0,0,0,0); } |
ハイライトカラーを変更
ハイライトカラーを「変更」する場合、CSSで以下のように記述します。|
1 2 3 |
a { -webkit-tap-highlight-color:#ff0000;/*赤色*/ } |
CSS3のRGBaを利用することもできます。
|
1 2 3 |
a { -webkit-tap-highlight-color:rgba(255,0,0,0);/*赤色*/ } |
Android
ハイライトカラーを無効化
Androidですが、ハイライトカラーを「無効」にする場合はiPhone（iOS）と同じ処理です。|
1 2 3 |
a { -webkit-tap-highlight-color:rgba(0,0,0,0); } |
ハイライトカラーを変更
Androidの場合はハイライトカラーを変更することが出来ないので、jQueryを使って「指で画面を触れた時と指を離した時とで、色を変更するなどの別処理を入れる必要があります。参考ページ
http://www.sprouthead.com/blog/javascript/highlight2.html
コメント