Html select option separator

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

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

ОТВЕТЫ

Ответ 1

Подход с отключенными опциями выглядит наилучшим образом и поддерживается лучше всех. Я также включил пример использования optgroup.

optgroup (таким образом, отчасти сосет):

<select>
    <optgroup>
        <option>First</option>
    </optgroup>
    <optgroup label="_________">
        <option>Second</option>
        <option>Third</option>
    </optgroup>
</select>

Ответ 2

Try:

<optgroup label="----------"></optgroup>

Ответ 3

Это старый поток, но поскольку никто не отправил подобный ответ, я добавлю это как его предпочтительный способ разделения.

Я нахожу использование тире и такового, чтобы быть чем-то вроде глазного яблока, поскольку оно может не соответствовать ширине окна выбора. Поэтому я предпочитаю использовать CSS для создания моих разделителей.. простая цветовая схема.

<select>
  <option style="background-color: #cccccc;" disabled selected>Select An Option</option>
  <option>First Option</option>
  <option>Second</option>
  <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option>
  <option>Third</option>
  <option>Fourth</option>
  <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option>
  <option>Fifth</option>
  <option>Sixth</option>
</select>

Ответ 4

Если вы не хотите использовать элемент optgroup, поместите дефисы в элемент option вместо этого и дайте ему отключенный атрибут. Он будет виден, но седой.

<option disabled>----------</option>

Ответ 5

Вместо обычного гифа я заменил его с помощью символа горизонтального штриха из расширенного набора символов, он не выглядит очень приятным, если пользователь находится в другой стране, которая заменяет этот символ, но отлично работает для меня. Существует ряд различных символов, которые вы можете использовать для некоторых отличных эффектов, и не задействовано css.

<option value='-' disabled>――――</option>

Ответ 6

Определите класс в CSS:

option.separator {
    margin-top:8px;
    border-top:1px solid #666;
    padding:0;
}

Пишите в HTML:

<select ...>
    <option disabled class="separator"></option>
</select>

Ответ 7

Я делаю комментарий @Laurence Gonsalves в ответ, потому что он единственный, который работает семантически и не выглядит как взлома.

Попробуйте добавить это в таблицу стилей:

optgroup + optgroup { border-top: 1px solid black }

Гораздо менее дрянной выглядит, чем кучка тире.

Ответ 8

Другой способ - использовать фоновое изображение css 1x1 по опции, которая, похоже, работает только с firefox и имеет резервную копию "----" 

<option value="" disabled="disabled" class="SelectSeparator">----</option> 

.SelectSeparator
    {
      background-image:  url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
      color:black;
      background-repeat:repeat-x;
      background-position:50% 50%;
      background-attachment:scroll;
}

http://jsfiddle.net/yNecQ/6/

или использовать javascript (jquery) для:

-hide the select element and 
-show a div which can be completely styled and 
-reflect the div state onto the select for the form submit

http://tutorialzine.com/2010/11/better-select-jquery-css3/

см. также Как добавить горизонтальную линию в элемент управления html?

Ответ 10

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

В HTML:

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

Или в XHTML:

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

Ответ 11

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

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

Ответ 12

 <option  data-divider="true" disabled>______________</option>

вы тоже можете это сделать. это легко и сделать выпадающий список выбора разделителя.

Ответ 13

Я выбрал условно чередующийся цвет и фон. Установив порядок сортировки и с 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