hr tags inside of the select options list

Safari and Chrome support <hr> tags inside of a <select> options list[1] to create logical deviders. It is the beauty of HTML that the <hr> will simply be ignored by other browsers.

<select>
<option>All options</option>
<hr>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
</select>

Using the above code, when your browser supports the <hr> tag inside of <select> options, the text „All options“ will be divided from the other options by a separator line in the below example.

When your browser supports the <hr> tag inside of <select>, it will separate "All options" from the other options with a small line.

  1. Select element: now with horizontal rules ↩︎

Comments