• RSS

[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

スマホサイトでリンクをタップすると、iPhone(iOS)ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。

このグレーの影やオレンジの枠(ハイライト表示)をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。

iPhone(iOS)

ハイライトカラーを無効化

まずはiPhone 向けにハイライトカラーを「無効」にする場合、CSS で以下のように記述します。



ハイライトカラーを変更

ハイライトカラーを「変更」する場合、CSS で以下のように記述します。


CSS3 の RGBa を利用することもできます。



Android

ハイライトカラーを無効化

さてAndroid ですが、ハイライトカラーを「無効」にする場合はiPhone(iOS)と同じ処理です。



ハイライトカラーを変更

Android の場合はハイライトカラーを変更することが出来ないので、OS・Androidのハイライト表示の指定について。その2 の記事で紹介されているように、jQuery を使って「指で画面を触れた時と指を離した時とで、色を変更する」などの別処理を入れるコトになります。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください