HTML の <select> 要素は、選択式のメニューを提供するコントロールを表します。

上のデモは、典型的な <select> の利用方法を示しています。アクセシビリティのために、 <label> と結び付けられるように id 属性が与えられています。それぞれのメニューの選択肢は、 <select> の中の <option> 要素で定義されています。

<option> 要素は、選択肢が選択されたときにサーバーに送信するデータの値を含mぬ value 属性を持ちます。 value 属性が含まれない場合、既定で要素の中に含まれるテキストの値が使用されます。 <option> 要素に selected 属性を付けることで、ページが最初に読み込まれたときに既定で選択状態にすることができます。

<select> 要素は、複数の選択肢を選択することができるかどうかを定める multiple、同時にいくつの選択肢を表示することができるかを定める size など、制御のために利用することができる固有の属性がいくつかあります。 required, disabled, autofocus, などのような一般のフォーム入力属性の多くも受け付けます。

さらに、 <option> 要素を <optgroup> 要素の中に入れることで、ドロップダウンの中で選択肢をグループに分割することができます。

その他の例は、ネイティブフォームウィジェット: ドロップダウンコンテンツを参照してください。

属性

この要素はグローバル属性を持ちます。

autocomplete
DOMString で、ユーザーエージェントの自動補完機能のヒントを提供します。値の完全なリストや自動補完の使い方の詳細は、 HTML の autocomplete 属性を参照してください。
autofocus
真偽値属性で、ページが読み込まれた時にこのフォームコントロールが入力フォーカスを持つべきであることを指定することができます。文書内で autofocus 属性を持つことができるフォーム要素は一つだけです。
disabled
真偽値属性で、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば fieldset 要素から継承します。もし親要素に disabled 属性を持つものがなければ、そのコントロールは利用可能です。
form
この属性で、 select 要素を関連付ける <form> 要素 (つまり、フォームの所有者) を指定できます。属性値は同じ文書内の form 要素の id でなければなりません。この属性によって、 select 要素を、 form 要素の子孫に限らず、文書内の任意の場所に置くことができます。
multiple
真偽値属性で、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができる選択肢は一つだけです。 multiple が指定されている場合、多くのブラウザーは単一行のドロップダウンの代わりに、スクロールするリストボックスを表示します。
name
この属性は、コントロールの名前を指定するために使用します。
required
真偽値属性で、空ではない文字列の値の選択肢を選択しなければならないことを示します。
size

コントロールがスクロールするリストボックスとして表示される場合 (つまり、 multiple が指定されている場合)、この属性は一度に見えるべきリストの行数を表します。ブラウザーは、 select 要素をスクロールリストボックスとして提供する必要はありません。既定値は 0 です。

メモ: HTML5 の仕様によると、 size 属性の初期値は 1 であるべきとされています。しかしながら、実際のところは、このことによっていくつかのウェブサイトを壊してしまうことがわかり、他のブラウザーでも現在そうしているものはなく、 Mozilla は当分の間、 Firefox でも 0 を返し続けることを選択しました。

CSS のスタイル付け

<select> 要素は、 CSS を使って生産的にスタイル付けすることが困難です。他の要素のように、特定の側面で影響を与えることはできます。 — 例えば、ボックスモデル表示されるフォントを操作する、 appearance プロパティを使用してシステムの既定の appearance を削除することができます。

しかし、これらのプロパティはブラウザー間で一貫した結果が得られませんし、異なる種類のフォーム要素を互いに一列に並べたりするのは困難なことです。 <select> 要素の内部構造は複雑で、制御するのは困難です。完全に制御したいのであれば、 (jQuery UI のような) スタイル付けをするのに優れた機能を備えたライブラリを使用するか、非意味的要素や JavaScript や WAI-ARIA をを使用して独自のドロップダウンメニューを実装することを検討してください。

<select> のスタイル付けについてのさらなる有益な情報は、以下を参照してください。

基本的な select

以下の例では、とても簡単なドロップダウンメニューを生成し、既定で第二の選択肢を選択状態にしておきます。

<!-- 最初に Second Value が選択されます。 -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

これは次のように表示されます。

高度な複数選択の機能

以下の例はもっと複雑で、 <select> 要素で使用できる機能をもっと示しています。

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

これは、 (現在のところ、 MDN が最終的なページをレンダリングする際に multiple 属性を削除してしまうため/em>) 正しく表示されないので、ページ上のデモとしてはお見せできません。どのように表示されるかを見るには、代わりに GitHub 上の複数選択の例を見ることができます。

次のことが分かるでしょう。

  • multiple 属性を入れてあるので、複数のオプションを選択することができます。
  • size 属性は、同時に4行だけ表示できるようにします。スクロールしてすべての選択肢を表示することができます。
  • <optgroup> を入れることで、選択肢を複数のグループに分割しています。これは純粋に視覚的なグループ化であり、視覚表現は通常、太字のグループ名と字下げした選択肢で構成されます。
  • "Hamster" の選択肢はには disabled 属性が入っているので、選択することができません。

メモ: デスクトップコンピューターでは、 Ctrl, Command, Shift キーを押しながらクリックして複数の項目を選択または解除します。

技術的概要

コンテンツカテゴリ フローコンテンツ記述コンテンツ対話型コンテンツリスト化ラベル付け可能リセット可能、及びサブミット可能フォーム関連コンテンツ要素
許可されている内容 0 個以上の <option> 要素または <optgroup> 要素
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
許可されている ARIA ロール menu
DOM インターフェイス HTMLSelectElement

仕様書

仕様書 状態 備考
HTML Living Standard
<select> の定義
現行の標準  
HTML5
<select> の定義
勧告  
HTML 4.01 Specification
<select> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 あり
補足
完全対応 あり
補足
補足 border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge 完全対応 ありFirefox 完全対応 1
補足
完全対応 1
補足
補足 Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 あり
補足
完全対応 あり
補足
補足 border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.
補足 border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Chrome Android 完全対応 あり
補足
完全対応 あり
補足
補足 border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.
Opera Android 完全対応 ありSafari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Samsung Internet Android 完全対応 あり
autofocusChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
disabledChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
formChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
multipleChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
nameChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
requiredChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
sizeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, 8845musign, yyss, ethertank, sii
最終更新者: mfuji09,