HTML5 search、WebKitブラウザは使用注意

A Web Design Community curated by Chris Coyier.

HTML5で新しく策定が進められている機能のひとつに、input要素におけるsearchタイプがある。これは検索フィールドであることを明示するための型で、今のところ通常のテキストフィールドと大きな違いはない。ただし、WebKitを採用しているブラウザ(ChromeやSafari)では扱いが異なっている。

このあたりの話がWebKit HTML5 Search Inputs - CSS-Tricksにまとめられている。WebKitではsearchが指定されたinputはほかのinputとは挙動が違い、CSSの適用などには注意が必要という内容になっている。指摘されている内容をまとめると次のとおり。

WebKitではtype=searchが指定されたinput要素は、ブラウザの右上に表示されているテキストフィールドと同じ扱いになるように設定されている。たとえば文字を入力すると右端に☓マークがあらわれ、入力した文字を一気にクリアできるようになる。ほかのブラウザが通常のテキストフィールドのように扱うのと比べ、WebKitのsearchは適用できる変更内容が限られており、CSSの多くは適用できない。このため詳しい挙動を知らない状態ではCSSを適用しない方がいい。
多くはないがWebKitのsearchに適用できるCSSもある。
WebKitのsearchにはtext-indentは適用しない方がいい。下方部にずれて表示されるか、表示されなくなる。
WebKitのsearchでは「results=数値」を指定することで入力文字の履歴が表示されるようになる。左端に表示される虫眼鏡のアイコンをクリックすると履歴が表示される。
WebKitのsearchはサイズ変更が制限されており、3種類の変更しか許可されていない。しかも変更はフォントサイズの変更によってのみ実施することが可能。10px以下、11pxから15px、16px以上というしきい値になっている。
placeholderに文字列を指定することで、あらかじめフィールド内に文字列を表示させておくことができる。なにかを入力するとplaceholderに指定した文字列は表示されなくなる。

以降に、WebKit HTML5 Search Inputsに掲載されているサンプルを実施しやすいようにまとめたHTMLファイルと、Safari、Chrome、Firefox、Operaで閲覧した結果を掲載しておく。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>input type=search demo</title>
  <style type="text/css">
    /*
     samples from http://css-tricks.com/webkit-html5-search-inputs/
       "WebKit HTML5 Search Inputs"
     */
    input[type=search] {
      margin: 1em 0em 0em 0em;
    }
    input[type=search]#style1 {
      padding: 30px;            /* WebKitでは padding: 1px; で上書きされる */
      font-family: Georgia;     /* WebKitでは -webkit-small-control; で上書きされる */
      border: 5px solid black;  /* WebKitでは border: 2px inset; で上書きされる */
      background: red;          /* WebKitでは background-color: white; で上書きされる */
      line-height: 3;           /* WebKitでは適用されない */
    }
    input[type=search]#style2 {
      color: red;
      text-align: right;
      cursor: pointer;
      display: block;
      width: 100%;
      letter-spacing: 4px;
      text-shadow: 0 0 2px black;
      word-spacing: 20px;
    }
    input[type=search]#style3 { text-indent: 1.5em; }
    input[type=search]#style5s { font-size: 10px; }
    input[type=search]#style5m { font-size: 11px; }
    input[type=search]#style5l { font-size: 16px; }
  </style>
</head>
<body>
  デフォルト: <input type=search><br>
  1) <input type=search id=style1><br>
  2) <input type=search id=style2><br>
  3) <input type=search id=style3><br>
  4) <input type=search results=5 autosave=DM1ERYhbnNjmA><br>
  <br><br><br>
  5) <input type=search id=style5s> <input type=search id=style5m> <input type=search id=style5l><br>
  6) <input type=search placeholder="キーワードを入力..."><br>
</body>
</html>