← Back to All Tags

<select>

Defines a dropdown list

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
Tip: The <select> element is most commonly used in forms to collect user input from a predefined set of options.
Note: Always use the <label> element with select boxes to improve accessibility and usability.

Browser Support

The <select> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
name text Specifies the name of the dropdown list (required for form submission)
multiple multiple Specifies that multiple options can be selected at once
size number Specifies the number of visible options in a dropdown list
required required Specifies that the user must select a value before submitting the form
disabled disabled Specifies that the dropdown list should be disabled
autofocus autofocus Specifies that the dropdown list should automatically get focus when the page loads
form form_id Specifies which form the select element belongs to

Examples

Basic Dropdown

Create a simple dropdown list:

Example

<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>:

Example

<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:

Example

<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:

Example

<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:

Example

<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>
Tip: Include an empty option with value="" as the first option when using the required attribute to force users to make a selection.

Styled Select Box

Apply custom CSS styling:

Example

<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

Interactive Example

Try selecting from these dropdown menus:

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

Form Data Example

<!-- 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

Accessible Select Example

<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
Alternative Solutions: For complex custom dropdowns, consider JavaScript libraries like Select2, Choices.js, or build a custom component with ARIA roles. Always ensure accessibility is maintained.

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:

Default CSS

select {
  display: inline-block;
}

Related Tags