【HTML】input type=”search” で検索ボックスを作る方法｜クリアボタン・inputmode・datalist との組み合わせを解説

サイトの右上や記事一覧の上によくある「キーワードを入れて検索」する入力欄。あれは <input type="text"> でも作れますが、検索用途なら <input type="search"> を使うのが自然です。type="search" にすると、ブラウザが入力内容を消すクリア（×）ボタンを付けてくれたり、スマホのキーボードが検索向きに変わったりします。この記事では、type="text" との違いから、フォームでの検索、スマホでの入力体験を整える属性、datalist との組み合わせ、そしてクリアボタンの見た目を CSS で調整する方法までを、実際に触れるデモを交えて解説します。

type=”search” で検索用の入力欄を作る

<input> の type 属性に search を指定すると、検索キーワードを入力するための欄になります。基本の書き方は次の通りです。

<label for="q">サイト内検索</label>
<input type="search" id="q" name="q" placeholder="キーワードを入力">

入力欄には <label> を for 属性で結びつけておきます。ラベルをクリックすると入力欄にフォーカスが移り、スクリーンリーダーでも何を入力する欄なのかが正しく読み上げられます。name 属性は、フォーム送信時にサーバーへ送られる値の名前です。ここでは q（query の略）としていますが、名前は自由に決められます。placeholder には入力例やヒントを薄く表示できますが、これはラベルの代わりにはならない点に注意してください。入力を始めると消えてしまうため、何の欄かを示す役割は <label> に任せます。

type=”text” と何が違うのか

見た目はほとんど同じですが、type="search" には検索欄ならではの振る舞いが備わっています。主な違いを整理しました。

一方で、送信される値やバリデーションの基本的な仕組みは type="text" と変わりません。入力できるのは1行のテキストで、required や maxlength といった属性も同じように使えます。つまり type="search" は、テキスト入力欄に「これは検索欄です」という意味と、クリアボタンなどの使い勝手を足したもの、と考えると分かりやすいです。なお、Enter キーを押したときにフォームを送信する挙動は両者で共通で、「Enter で検索が実行される」といった特別な違いがあるわけではありません。

実際の見た目を下のデモで確認してみましょう。入力欄に文字を打つと、右端に×ボタンが現れます（このデモではあらかじめ文字を入れてあります）。×を押すと入力が消えるはずです。

<form class="search" role="search">
  <label for="q">サイト内検索</label>
  <input
    type="search"
    id="q"
    name="q"
    placeholder="キーワードを入力"
    inputmode="search"
    enterkeyhint="search"
    value="レスポンシブ"
  >
  <button type="submit">検索</button>
</form>

.search {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  flex-wrap: wrap;
}

.search label {
  width: 100%;
  font-size: 14px;
  color: #555;
}

#q {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* クリア（×）ボタンを少し大きく・色を変える（Chrome / Safari） */
#q::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  margin-left: 6px;
  cursor: pointer;
  background: #888;
  /* × 形のマスク画像で塗りつぶす */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.search button {
  padding: 8px 16px;
  font-size: 15px;
  border: none;
  border-radius: 6px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

クリアボタンが表示されるかどうかや、その見た目はブラウザによって異なります。Chrome や Safari では×ボタンが出ますが、Firefox では標準では表示されません。あくまで「ブラウザが提供してくれるおまけ」であり、必ず出るものではないと考えておくと安全です。

フォームにして検索を送信する

入力した語で実際に検索するには、<input type="search"> を <form> で囲み、送信先と送信方法を指定します。検索は基本的に method="get" を使います。GET だと入力語が URL のクエリ文字列（?q=...）に載るため、検索結果ページをブックマークしたり共有したりできるからです。

<form action="/search" method="get" role="search">
  <label for="q">サイト内検索</label>
  <input type="search" id="q" name="q" placeholder="キーワードを入力">
  <button type="submit">検索</button>
</form>

この状態で「レスポンシブ」と入力して送信すると、/search?q=レスポンシブ のような URL に遷移します。name="q" が URL のパラメータ名になり、入力値がその値になります。あとはサーバー側でこの q を受け取り、該当する記事を絞り込んで表示します。入力欄が1つだけのフォームなら、送信ボタンを押さなくても Enter キーで送信できます。<form> に role="search" を付けておくと、そのフォームが検索領域であることが支援技術に伝わり、ページ内の主要な検索として認識されやすくなります。

スマホの入力体験を整える inputmode と enterkeyhint

スマートフォンでは、入力欄の種類に応じて画面キーボードの見た目を変えられます。検索欄で役立つのが inputmode と enterkeyhint の2つの属性です。

enterkeyhint="search" を付けると、多くのスマホで Enter キーが虫めがねのアイコンや「検索」という表示になり、そのまま押せば検索できることが直感的に伝わります。書き方は次の通りで、どちらも入力欄に属性として足すだけです。

<input
  type="search"
  id="q"
  name="q"
  inputmode="search"
  enterkeyhint="search"
  placeholder="キーワードを入力"
>

これらはキーボードの見た目に関するヒントで、入力できる文字を制限するものではありません。また、対応していない端末では単純に無視されるだけなので、付けておいて害はありません。パソコンの物理キーボードには影響しない点も押さえておきましょう。

datalist で入力候補を出す

検索欄によく入力される語をあらかじめ候補として提示したいときは、<datalist> と組み合わせます。入力欄の list 属性に <datalist> の id を指定すると、入力中にその候補が表示され、選ぶだけで入力を済ませられます。

<label for="q">サイト内検索</label>
<input type="search" id="q" name="q" list="keywords" placeholder="キーワードを入力">

<datalist id="keywords">
  <option value="レスポンシブ">
  <option value="Flexbox">
  <option value="Grid レイアウト">
</datalist>

datalist はあくまで入力の補助で、候補以外の語も自由に入力できます。プルダウン（<select>）のように選択肢を限定するものではない、という点が違いです。候補が確定的なものではなく「よく検索される語のヒント」である検索欄とは、相性のよい組み合わせです。datalist の詳しい使い方は別の記事で解説しているので、そちらも参考にしてください。

クリアボタンの見た目を CSS で調整する

Chrome や Safari が表示するクリア（×）ボタンは、::-webkit-search-cancel-button という擬似要素で見た目を変えられます。標準では小さくて目立ちにくいので、少し大きくしたり色を変えたりして押しやすくする、といった調整ができます。冒頭のデモでも、この擬似要素を使って×ボタンを整えています。

/* 標準の×ボタンの見た目を打ち消す */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  cursor: pointer;
  /* 自前のアイコンや色に差し替える */
  background: #888;
}

ポイントは、まず appearance: none; で標準の×を消してから、自分の見た目を作り直すことです。ベンダープレフィックス付きの -webkit-search-cancel-button という名前からも分かる通り、この擬似要素は WebKit / Blink 系（Chrome・Edge・Safari）でしか効きません。Firefox には効かず、そもそも標準の×ボタンも出ないため、この装飾はあくまで「対応ブラウザでの上乗せ」と考えておきましょう。すべてのブラウザで完全に同じ×ボタンを出したい場合は、標準の×は使わず、自前のボタンを <input> の横に置いて JavaScript で入力値を空にする方法をとります。

×ボタンが表示されない・装飾できないとき

入力欄が空だと×は出ない

クリアボタンは、欄に文字が入力されているあいだだけ表示されます。何も入力していない状態では出てこないので、「×が見当たらない」というときは、まず1文字入力してみてください。これは仕様通りの動きで、空の欄には消すものがないため×も現れません。

Firefox では標準の×が出ない

Firefox は type="search" でも標準のクリアボタンを表示しません。::-webkit-search-cancel-button も効かないため、Firefox でも×ボタンを出したいときは、前述のように自前のボタンを用意する必要があります。ブラウザごとに×ボタンの有無が変わることを前提に、「あってもなくても検索そのものは成立する」設計にしておくと安心です。

まとめ

<input type="search"> は、検索キーワードを入力するための入力欄です。type="text" と基本的な仕組みは同じですが、内容を消すクリア（×）ボタンや検索欄としての意味づけが加わります。検索を送信するときは <form> で囲み、URL に語が載る method="get" を使い、name でパラメータ名を決めます。スマホでは inputmode="search" と enterkeyhint="search" でキーボードを検索向きに整え、datalist を組み合わせれば入力候補も出せます。クリアボタンの見た目は ::-webkit-search-cancel-button で調整できますが、対応は WebKit / Blink 系に限られます。<label> の関連付けや role="search" と合わせて、使いやすくアクセシブルな検索欄を作りましょう。

参考ページ

• <input type=”search”> – HTML | MDN
• enterkeyhint グローバル属性 – HTML | MDN
• inputmode グローバル属性 – HTML | MDN
• <datalist> – HTML | MDN