input type="search"にスタイルを効かせる

<input type="search">

検索ボックスをcssで角丸にしようとしたら、Safariでスタイルが適用されなかった。。
ブラウザデフォルトの設定が効いてしまう様子。

以下スタイルを追加してあげるとpaddingやら丸角やらが適用された。解決。

/* プロパティが効くようにする */
.input[type="search"] {
  -webkit-appearance: textfield;
}

/* フォーカス時に四角いアウトラインでるので消す */
.input[type="search"]:focus {
  outline-style: none;
}

/* paddingで消せない余白を消す */
.input[type="search"]::-webkit-search-decoration {
  display: none;
}

IE9以下はtype="search"自体使えないので、IE9も対象の場合はsearchを使わない別の方法を考えまそう。