【iOS】リンクをタップしたときのカラーを変更する方法。

Ads by Google

iPhone、iPad等、iOS デバイスでは、ウェブサイトのリンクをタップした際に、薄いグレーがハイライト表示されます。

これはデフォルトの仕様ですが、CSS で[-webkit-tap-highlight-color]というプロパティを指定することで任意の色に変更することができます。

a {-webkit-tap-highlight-color:#ff0000;}

もちろん rgba での指定もできますので、半透明化するなどの加工もできます。

また、このタップ時のハイライト表示自体が必要ない場合は[-webkit-tap-highlight-color:transparent;]と記述すれば非表示にすることができます。

また、補足になりますが、iOS でリンクを長押しした際に表示されるポップアップメニューを非表示にするときは、[-webkit-touch-callout]プロパティを使います。

* {-webkit-touch-callout:none;}

両者共に、よりウェブアプリに近いユーザーインターフェースを実現したいときに設定します。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です