HTML `<select>`

Baseline *

20157

<select> HTML

<label for="pet-select">:</label>

<select name="pets" id="pet-select">
  <option value="">--1 --</option>
  <option value="dog"></option>
  <option value="cat"></option>
  <option value="hamster"></option>
  <option value="parrot"></option>
  <option value="spider"></option>
  <option value="goldfish"></option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

autofocus

<fieldset> disabled

form

<select> <form> <form> id <select> <form>

<select> <form> <form> <form>

multiple

URLSearchParams name=value1&name=value2 multiple size 1 4

name

required

1 <select> multiple select ""

--1 --placeholder <select> <optgroup> size 1 multiple <select> <option>

size

1 1 1 multiple 4 size 0

<select> must be provided name <select> <option>

<option> value value selected <option> selected <option>

<select> JavaScript HTMLSelectElement value <option>

<option> <optgroup> <hr>

<select> <option> <div> <optgroup> <option> <optgroup>

: <select> <button><selectedcontent> DOM <option><optgroup><hr>

<select> multiple size 1

CtrlCommandShift

: Firefox

macOS Ctrl + Ctrl + OS Mission Control Application windows

<select> Tab
Shift

<select> Tab
Ctrl

CSS

<select> CSS <select>

select

appearance appearance

<select> JavaScript WAI-ARIA

:open <select> <select> multiple

<select>

HTML
HTML
field-sizing <select>

<select> <hr>

select

3 2 selected

html

<select name="choice">
  <option value="first">1 </option>
  <option value="second" selected>2 </option>
  <option value="third">3 </option>
</select>

select

<optgroup> <hr>

html

<label for="hr-select"></label> <br />

<select name="foods" id="hr-select">
  <option value=""></option>
  <hr />
  <optgroup label="">
    <option value="apple"></option>
    <option value="banana"></option>
    <option value="cherry"></option>
    <option value="damson"></option>
  </optgroup>
  <hr />
  <optgroup label="">
    <option value="artichoke"></option>
    <option value="broccoli"></option>
    <option value="cabbage"></option>
  </optgroup>
  <hr />
  <optgroup label="">
    <option value="beef"></option>
    <option value="chicken"></option>
    <option value="pork"></option>
  </optgroup>
  <hr />
  <optgroup label="">
    <option value="cod"></option>
    <option value="haddock"></option>
    <option value="salmon"></option>
    <option value="turbot"></option>
  </optgroup>
</select>

<select>

multiple
size 4 4
2 <optgroup> 2
"Hamster" disabled

html

<label>
  1 :
  <select name="pets" multiple size="4">
    <optgroup label="4 ">
      <option value="dog"></option>
      <option value="cat"></option>
      <option value="hamster" disabled></option>
    </optgroup>
    <optgroup label="">
      <option value="parrot"></option>
      <option value="macaw"></option>
      <option value="albatross"></option>
    </optgroup>
  </select>
</label>


	`<option><optgroup><hr>` `<button>` `<selectedcontent>` `<div><script><template><noscript>`


ARIA	`multiple` 1 `size` `combobox` `listbox`
ARIA	`multiple` 1 `size` `menu` `role`
DOM	`HTMLSelectElement`


HTML # the-select-element

MDN

MDN 2026820

GitHub

HTML <select>

CSS

select

select

select

MDN

HTML `<select>`