разделитель выбора HTML

Question

Как сделать разделитель в теге select?

New Window
New Tab
-----------
Save Page
------------
Exit

Answer 1

Этот всегда лучший.

<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>

Answer 2

Вы можете использовать тире "-". Между символами нет видимых пробелов.
(В некоторых шрифтах!)

В HTML:

<option value="—————————————" disabled>—————————————</option>

Или в формате XHTML:

<option value="—————————————" disabled="disabled">—————————————</option>

Answer 3

Я выбрал условно чередовать цвет и фон. Установив порядок сортировки и с помощью vue.js я сделал что-то вроде этого:

<style>
    .altgroup_1 {background:gray; color:white;}
    .altgroup_2{background:white; color:black;}
</style>

<option :class = {
    'altgroup_1': (country.sort_order > 25),
    'altgroup_2': (country.sort_order > 50 }"
    value="{{ country.iso_short }}">
    {{ country.short_name }}
</option