button要素にmask-imageを使うとアウトラインが消える

虫眼鏡アイコンの検索ボタンをbutton要素とmask-imageで実装した際、Tabキーでのフォーカス切り替え時にアウトラインが表示されないということがあったので対応方法をメモ。

サンプルコード

以下のような検索ボタンで、ラベルはvisually-hiddenで非表示にしています。

<button class="btn-search">
  <span class="visually-hidden">検索</span>
</button>

CSSは以下の通りで、SVGアイコンをmask-imageで設定しています。

.btn-search {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  background: transparent;

  width: 32px;
  height: 32px;
  mask-image: url(icon_search.svg);
  mask-size: contain;
  background-color: red;
}

この実装の場合、Tabキーでフォーカスを切り替えた際にアウトラインが表示されなくなります。
buttonにmask-imageでアウトラインが表示されないデモページ

mask-imageではなくbackground-imageで実装した場合、アウトラインは問題なく表示されますが、CSSでの色の変更ができなくなります。

.btn-search {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  background: transparent;

  width: 32px;
  height: 32px;
  background: url(icon_search.svg) center center no-repeat;
  background-size: contain;
}

background-imageで実装するデモページ

対応する方法はいくつかありますが、今回の場合は疑似要素でアイコンを設置することで対応できました。

.btn-search {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  background: transparent;

  width: 32px;
  height: 32px;
}
.btn-search::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  mask-image: url(icon_search.svg);
  mask-size: contain;
  background-color: red;
}

対応後のデモページ