Safari で検索フォームを padding するには appearance が必要

Safari のロゴ

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 は可能な限り使うべきではありません。