select 要素（HTMLタグ） - プログラミングスタイル

2018年08月06日

HTMLのselect要素の説明です。select要素は、あらかじめ決められた選択肢の中から項目を選ばせるタイプの部品を定義する要素です。

要素の記述例

select要素の記述例

<div>
  <label for="prefectures">都道府県</label>
  <select id="prefectures" name="prefectures" size="4">
    <option value="1">東京都</option>
    <option value="2">神奈川県</option>
    <option value="3" selected>千葉県</option>
    <option value="4">埼玉県</option>
    <option value="5">茨城県</option>
    <option value="6">群馬県</option>
    <option value="7">栃木県</option>
  </select>
</div>

閲覧中ブラウザーでの表示結果

要素の説明

select要素は、あらかじめ決められた選択肢の中から項目を選ばせるタイプの部品を定義する要素です。
select要素の選択肢を定義する場合は、option要素を使用します。

利用できる属性

select要素で利用できる属性
属性名	属性の説明
autocomplete	オートコンプリート機能を定義するための属性です。
autofocus	ページ読み込みと同時にこの部品にフォーカスをあてることを定義する論理型属性です。
disabled	部品を無効にする論理型属性です。フォーカスもできなくなります。
form	関連付けたい任意のform要素のid属性を定義するための属性です。
multiple	複数選択肢を同時に選択させる部品にする場合に定義する論理型属性です。
name	フォーム送信のデータ値を識別するための名前を定義する属性です。
required	部品の選択を「必須」にするための論理型属性です。
size	一度に表示する選択肢の数を定義する属性です。デフォルト値は「1」で、multiple属性が定義されている場合は「4」です。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「論理型属性」を参照してください。

イベントハンドラ属性

select要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

select要素のブラウザデフォルトCSS

select {
  -webkit-appearance: menulist;
  -webkit-rtl-ordering: logical;
  -webkit-writing-mode: horizontal-tb !important;
  border-radius: 0px;
  border-color: rgb(169, 169, 169);
  box-sizing: border-box;
  align-items: center;
  white-space: pre;
  color: black;
  background-color: white;
  cursor: default;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-radius: 5px;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  margin: 0em;
  font: 400 13.3333px Arial;
}
select:not(:-internal-list-box) {
  overflow: visible !important;
}

前ページ HTMLタグリファレンス次ページ

目次