スマホでタップ時に表示される枠を消す

スマホでリンク部分をタップした際に表示される枠を消したいという要望がたまにあるので、表示しないようにする方法をメモ。

サンプルコード

まずはタップ時の挙動について確認してみます。
通常のaタグとbuttonタグの配置と、CSSでスタイルを設定したボタンを用意します。

<a href="#">aタグ</a>
<button>buttonタグ</button>
<a href="#" class="btn">aタグボタン</a>
<button class="btn">buttonタグボタン</button>
<div class="btn">divタグボタン</div>
<a href="#" class="btn-round">aタグ角丸ボタン</a>
<button class="btn-round">buttonタグ角丸ボタン</button>
<div class="btn-round">divタグ角丸ボタン</div>

ボタンのスタイルは以下の通りです。

.btn,
.btn-round {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 60px;
	color: black;
	font-size: 16px;
	text-decoration: none;
	background: orange;
	cursor: pointer;
}
.btn-round {
	border-radius: 30px;
}

リンクをタップした際の枠表示のデモページ
iOS15.7.1でのタップした際の表示ですが、以下のように黒枠が表示されます。

CSSでクリック範囲を広くした場合は合わせて広くなり、角丸設定している場合は合わせて角丸の枠になるようです。
また、divタグでボタンのスタイルを設定した場合は枠は表示されませんでした。

Android12 で確認した場合、角丸設定したボタンの場合も枠は角丸にならない点と、divタグでボタンのスタイルを設定した場合も枠が表示される点がiOSと異なりました。
ただ手持ちのAndroidで確認した範囲のため、端末やバージョンによっては差異がある可能性はあります。

次に枠の非表示を試してみます。
-webkit-tap-highlight-color プロパティを使用します。

.btn,
.btn-round {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 60px;
	color: black;
	font-size: 16px;
	text-decoration: none;
	background: orange;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.btn-round {
	border-radius: 30px;
}

これで手持ちのiOS、Android共にボタンをタップしても枠が表示されなくなりました。
リンクをタップした際の枠非表示のデモページ

-webkit-tap-highlight-color はリンクがタップされている際の強調色を設定するプロパティで、今回は値にtransparentを指定しています。
注意点として、-webkit-tap-highlight-color はMDNだと非標準となっているのと、特にAndroidの場合は端末によっての差異がある可能性があるので、使用の際はご注意ください。