[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

Android CSS3 -webkit-tap-highlight-color iOS

スポンサード

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

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

iPhone（iOS）

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

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

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

a {

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

}

ハイライトカラーを変更

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

a		{
	-webkit-tap-highlight-color:#ff0000;/*赤色*/
}

a {

-webkit-tap-highlight-color:#ff0000;/*赤色*/

}

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

a		{
	-webkit-tap-highlight-color:rgba(255,0,0,0);/*赤色*/
}

a {

-webkit-tap-highlight-color:rgba(255,0,0,0);/*赤色*/

}

Android

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

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

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

a {

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

}

ハイライトカラーを変更

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

参考ページ
OS・Androidのハイライト表示の指定について。その２

スポンサード