MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

select 要素

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

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

属性

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

autofocus HTML5
この属性は、例えば異なるコントロールで入力していることによってユーザーがそれを覆すような場合を除き、ページが読み込まれた際、フォームコントロールが入力フォーカスを持つべきことを指定できるようにします。文書内の 1 つのフォーム要素のみが、真偽値である、 autofocus 属性を持つことができます。
disabled
この真偽値属性は、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば fieldset 要素から継承します。もし親要素に disabled 属性を持つものがなければ、そのコントロールは利用可能です。
form HTML5
この属性で、select 要素が関連付けられた form 要素(フォームの所有者)を指定できます。属性値は同じ文書内の form 要素の ID でなければなりません。この属性によって、select 要素を、form 要素の子孫としてだけでなく、文書内の任意の場所に置くことができます。
multiple
この真偽値属性は、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができるのは 1 つの選択肢のみです。
name
この属性は、コントロールの名前を指定するために使用します。
required HTML5
空ではない文字列の値の選択肢を選択しなければならないことを示す真偽値属性です。
size
もしコントロールがスクロールリストボックスとして表される場合、この属性は一度に見えるべきリストの行数を表します。ブラウザーは、 select 要素をスクロールリストボックスとして提供する必要はありません。初期値は 0 です。
Firefox の注意: HTML5 の仕様によると、size 属性の初期値は 1 であるべきとされています。しかしながら、実際のところは、このことによっていくつかのウェブサイトを壊してしまうことがわかり、他のブラウザーでも現在そうしているものはなく、Mozilla は当分の間、Firefox でも 0 を返し続けることを選択しました。

<!-- 最初に 2 番目の値が選択されます。 -->
<select name="select"> <!-- 'name' を使用する代わりに id を補います -->
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

結果

注意

この要素の内容は静的で、編集可能 ではありません。

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
<select> の定義
現行の標準  
HTML5
<select> の定義
勧告  
HTML 4.01 Specification
<select> の定義
勧告  

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 (有) 1.0 (1.7 or earlier) [3] (有) (有) (有)
required 属性 (有) (有) 4.0 (2.0) 10 (有) (有)
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) [1] (有) 1.0 (1.0) [2] (有) (有) (有)
required 属性 (有) (有) 4.0 (2.0) 未サポート (有) (有)

[1] Android 4.1 (おそらく以降のバージョンも含む) のブラウザーアプリでは backgroundborder、または border-radius のスタイルを <select> へ適用した場合に、<select> の横にある三角印のメニューインジケーターが表示されないバグがあります。

[2] Android 版 Firefox はデフォルトで、すべての <select multiple> 要素に background-image でグラデーションを設定します。これは background-image: none を使用して無効化できます。

[3] 歴史的に、Firefox はキーボードやマウスのイベントが <option> 要素から親の <select> 要素に伝播することを許可してきました。これは Chrome では発生しませんが、この動作は多くのブラウザー間で一貫性がありません。ウェブ互換性を高めるため (および技術的な理由で)、Firefox がマルチプロセスモードであり <select> 要素がドロップダウンリストとして表示されるときに、<select> がインラインで提供されていて multiple 属性が定義されているか size 属性が 1 より大きければ、動作は変わりません。イベントのために <option> 要素を監視するのではなく、<select>change イベントを監視してください。詳しくは バグ 1090602 をご覧ください。

Chrome および Safari は <select> で、-webkit-appearance を適切な値でオーバーライドしなければ border-radius を無視します。

関連情報

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

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