<select>

Definition and Usage

The <select> tag is used to create a dropdown list.

The <select> element is used in conjunction with one or more <option> elements to define the available options in the list.

Key features of the select element:

• Creates dropdown menus for form inputs
• Allows single or multiple selections
• Can display a specified number of visible options
• Supports grouping options with <optgroup>
• Fully accessible with keyboard navigation

Attributes

Examples

Basic Dropdown

Create a simple dropdown list:

<label for="country">Choose a country:</label>
<select id="country" name="country">
  <option value="usa">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="canada">Canada</option>
  <option value="australia">Australia</option>
</select>

Dropdown with Option Groups

Group related options using <optgroup>:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
  </optgroup>
</select>

Multiple Selection

Allow users to select multiple options:

<label for="skills">Choose your skills (hold Ctrl/Cmd to select multiple):</label>
<select id="skills" name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="react">React</option>
</select>

Size Attribute

Display multiple visible options:

<label for="colors">Choose a color:</label>
<select id="colors" name="colors" size="4">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="purple">Purple</option>
  <option value="orange">Orange</option>
</select>

Required Field

Make a dropdown selection required:

<form>
  <label for="age-group">Select your age group: *</label>
  <select id="age-group" name="age-group" required>
    <option value="">-- Please select --</option>
    <option value="18-24">18-24</option>
    <option value="25-34">25-34</option>
    <option value="35-44">35-44</option>
    <option value="45+">45+</option>
  </select>
  <button type="submit">Submit</button>
</form>

Styled Select Box

Apply custom CSS styling:

<style>
  .custom-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #745af2;
    border-radius: 8px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .custom-select:focus {
    outline: none;
    border-color: #5a3fd8;
    box-shadow: 0 0 0 3px rgba(116, 90, 242, 0.1);
  }

  .custom-select:hover {
    border-color: #5a3fd8;
  }
</style>

<label for="styled-select">Choose an option:</label>
<select id="styled-select" name="option" class="custom-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Try it Yourself

Form Submission and Values

When a form containing a <select> element is submitted:

• The name attribute provides the field name
• The value attribute of the selected <option> is sent
• If no value attribute is specified, the text content of the option is used
• Multiple selections send an array of values (name[] format recommended)
• If no option is selected and the field is not required, no value is sent

<!-- This sends: country=canada when Canada is selected -->
<select name="country">
  <option value="usa">United States</option>
  <option value="canada" selected>Canada</option>
</select>

<!-- This sends: skills[]=html&skills[]=css when both are selected -->
<select name="skills[]" multiple>
  <option value="html" selected>HTML</option>
  <option value="css" selected>CSS</option>
  <option value="js">JavaScript</option>
</select>

Accessibility with Label and ARIA

• Always associate a <label> with your select element using the for and id attributes
• Use aria-label or aria-labelledby for additional context
• Use aria-describedby to link to helper text or instructions
• Mark required fields with the required attribute and visual indicators
• Ensure keyboard navigation works properly (arrow keys, Enter, Escape)
• Provide clear option text that works well with screen readers

<label for="payment-method">Payment Method: *</label>
<select
  id="payment-method"
  name="payment-method"
  required
  aria-describedby="payment-help"
>
  <option value="">-- Select payment method --</option>
  <option value="credit">Credit Card</option>
  <option value="debit">Debit Card</option>
  <option value="paypal">PayPal</option>
</select>
<small id="payment-help">Choose how you would like to pay</small>

Styling Limitations and Custom Alternatives

Native select elements have limited styling capabilities across browsers:

• Dropdown arrow styling varies by browser and is difficult to customize
• Option elements cannot be styled with images or complex HTML
• Mobile browsers often use native OS controls
• Hover and focus states have inconsistent support

Best Practices

• Always use a <label> element to describe the select box
• Add a required attribute when selection is mandatory
• Include a default "Please select" option for required fields
• Use <optgroup> to organize long lists of options
• Provide clear, concise option text
• Consider using a search or autocomplete for very long lists (10+ options)
• Test keyboard navigation (Tab, Arrow keys, Enter)
• Ensure sufficient color contrast for visibility
• Use the disabled attribute instead of hiding options when appropriate
• For multiple selections, consider checkboxes instead if space allows

Default CSS Settings

Most browsers will display the <select> element with the following default values:

select {
  display: inline-block;
}

Related Tags

• <option>

  Defines an option in a select list

• <optgroup>

  Groups related options together

• <datalist>

  Provides autocomplete options

• <label>

  Defines a label for form elements

• <form>

  Defines an HTML form

• <input>

  Defines an input control