input type=”search” の虫眼鏡アイコンを非表示にする

2022.12.30

iPhoneなどのiOS端末でinput type=”search”を閲覧した際に、input内の左側に虫眼鏡のアイコンが表示されるようなのですが、このアイコンを非表示にする方法を試してみます。

サンプルコード

まずは対応前の表示を確認してみます。

<input type="search" class="search" id="mySearch" name="q">

初期設定としてボーダーなどを設定します。

.search {
	border: #000 1px solid;
	border-radius: 0;
	outline: none;
	background: #ffffff;
}

これで基本的には問題なさそうだったのですが、iOS端末だと虫眼鏡のアイコンが追加されていました。

次に対応方法ですが、appearance: none で非表示にできるようです。

.search {
  -webkit-appearance: none;
	border: #000 1px solid;
	border-radius: 0;
	outline: none;
	background: #ffffff;
}

土