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="text"> <!--'text' を使用する代わりに id を補ってください-->
  <option value="first">First Value</option> 
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

結果

メモ

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

仕様書

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり2 あり13 あり あり あり2
autofocus あり あり1 あり あり あり
disabled あり あり1 あり あり あり
form あり あり1 あり あり あり
multiple あり あり1 あり あり あり
name あり あり1 あり あり あり
required あり あり410 あり あり
size あり あり1 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり1 2 あり2 あり44 あり あり2 あり
autofocus あり あり あり4 あり あり あり
disabled あり あり あり4 あり あり あり
form あり あり あり4 あり あり あり
multiple あり あり あり4 あり あり あり
name あり あり あり4 あり あり あり
required あり あり あり4 あり あり あり
size あり あり あり4 あり あり あり

1. 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>.

2. border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.

3. 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.

4. Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.

関連情報

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

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