The tabindex attribute on a <select> tag specifies the keyboard tab order of the dropdown control relative to the other controls on the page.
The tabindex value indicates when the dropdown control can be focused.
A <select> and other controls with tabindex values. Place the focus on the first field and tab a few times. Focused elements have a gold background.
<form action="/tutorial/action.html">
<input type="text" tabindex="1" placeholder="First name" name="firstname"><br />
<input type="text" tabindex="2" placeholder="Last name" name="lastname"><br />
<input type="text" tabindex="3" placeholder="Email" name="email"><br />
<select tabindex="4" name="country">
<option value="">-- Select country --</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="nl">Netherlands</option>
<option value="es">Spain</option>
<option value="it">Italy</option>
</select><br />
<input type="submit" tabindex="5" value="Submit">
</form>
The tabindex attribute assigns a tab sequence number to a select.
The actual tabindex numbers are not important. So, 30, 22, and 10 would give the same results.
The tabindex specifies the focus order of the <select> relative to the other areas or controls on the page.
This attribute indicates the sequential order of elements using the tab key.
With a negative tabindex value, the select is not reachable by tabbing but can be accessed by mouse or JavaScript.
The tabindex attribute is a global attribute that can be applies to any element.
With focus on a <select> press the spacebar to dropdown the list of options.
<select tabindex="index">
| Value | Description |
|---|---|
| index | Numeric value indicating the tab order relative to the other controls. |
Here is when tabindex support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
Back to <select>
