Allow `hr` element to group options in select element

[froschdesign]

Usage

The usage must be designed in such a way that the user explicitly decides whether the hr element is used. It should not be used automatically just because grouping is desired.

Examples

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <option value="apple">Apples</option>
  <option value="banana">Bananas</option>
  <option value="cherry">Cherries</option>
  <option value="damson">Damsons</option>
  <hr />
  <option value="artichoke">Artichokes</option>
  <option value="broccoli">Broccoli</option>
  <option value="cabbage">Cabbages</option>
</select>

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
</select>

Reference

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#select_with_grouping_options
• https://developer.chrome.com/blog/hr-in-select

[mimmi20]

Do all major browsers support this feature?

[froschdesign]

Looks good (on desktop) and all others should ignore it:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#browser_compatibility
• https://caniuse.com/mdn-html_elements_select_hr_in_select

(both have the same database)

[froschdesign]

@mimmi20
Good point. I have updated the description.
Thanks! 👍🏻