Edited at

Safariでinput type="search" にスタイルが当たらない

Safariで<input type="search"> にスタイルが当たらないバグがあります1


index.html

<input class="search-field" type="search" placeholder="キーワードから探す" />



style.css

.search-field {

box-sizing: border-box;
width: 180px;
height: 40px;
padding-left: 10px;
border: solid 2px red;
}

スクリーンショット 2019-04-12 12.24.56.png

なんでや! 直接style属性をいじっても !importantをつけても効果なし…。


style.css

.search-field {

box-sizing: border-box;
width: 180px;
height: 40px;
padding-left: 10px;
border: solid 2px red;
-webkit-appearance: textfield; /*これを追加*/
}

-webkit-appearance: textfield; を書き加えてあげると、期待通りの表示になりました。

スクリーンショット 2019-04-12 12.24.51.png

この記事この記事を見ると2010年から放置されてるみたいですね…





  1. バージョン12.1 (14607.1.40.1.4) で発生を確認