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

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;
}

input type=”search”のデモページ

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

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

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

input type=”search”デモページ2

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30