デフォルトのWebkit検索フィールドのスタイリングをすべて削除するにはどうすればよいですか？

Question

デフォルトでは、<input type="search" />は、Mac OS Xの「ネイティブ」検索フィールド（丸い角、クリアボタンなど）のようにレンダリングされます。私はこのカスタムスタイルを完全に削除して、入力が同等のテキスト入力（<input type="text" />）と同じに見えるようにしたいが、入力タイプはsearchのままにしておく。

私は-webkit-appearance: none;を試しましたが、これは非常に近いです...しかし、面白いことがあります。私はオーバーライドできないように見えますが、検索フィールドの幅が〜20pxテキスト入力よりも

別のものがありますか-webkit-私はスタイリングを完全に無効にすることを意識していませんか？

Answer 1

これらのスタイリングを試してみてください。

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
} 

出典：http://css-tricks.com/webkit-html5-search-inputs/#comment-82432代わりに表示 `の