Safari で検索フォームを padding するには appearance が必要
HTML5 からは input 要素の type 属性にいくつかのパラメータが追加されています。 例えば電話番号を入力するための tel, 検索語句を入力するための search です。 ブラウザ (ユーザエージェント) は W3C の定義などに従って属性に応じた入力フォームを自動で出力します。
多くの環境では自動選択されるフォームで問題が起こらないのですが、Safari は検索フォームに padding が効かない問題を持っています。 ここではこの問題を解決する方法を解説します。
appearance を設定する
Safari で検索フォームに padding などの CSS の設定が反映されないときは appearance プロパティを設定します。
プレフィクス(prefix) webkit を付けている点に注意してください。
appearance はフォームの形式を指定するためのプロパティです。これによって検索フォームをテキストフィールド(フォーム)にします。
Safari はテキストフィールドの padding の設定を反映します。
input[type="search"]
{
-webkit-appearance: textfield;
}appearance は標準仕様ではなく、廃止の可能性も十分ある
appearance は CSS3 で追加される予定であったプロパティですが、執筆時時点の最新の定義では、appearance プロパティは削除されています。
つまり、ある要素に対応する入力フォームはどんな環境でも定められているべきである、という定義ができたことになります。
したがって appearance は可能な限り使うべきではありません。