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

Question

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

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

Answer 1

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

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

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

отключена опция (чуть лучше):

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

И если вы хотите быть по-настоящему модным, используйте горизонтальный юникодный рисованный символ. Это сексуально!
(ЛУЧШИЙ ВАРИАНТ!)

<select>
    <option>First</option>
    <option disabled>──────────</option>
    <option>Second</option>
    <option>Third</option>
</select>

http://jsfiddle.net/JFDgH/2/

Answer 2

Попробуйте:

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

Answer 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>

Answer 4

Если вы не хотите использовать элемент optgroup, поместите тире в элемент option и присвойте ему атрибут disabled. Это будет видно, но затенено.

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

Answer 5

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

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

Написать в HTML:

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

Answer 6

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

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

Answer 7

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

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

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

Гораздо менее глупо, чем куча штрихов.

Answer 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?

Answer 9

Если это только WebKit, вы можете использовать <hr> для создания реального разделителя.

http://code.google.com/p/chromium/issues/detail?id=99534

Answer 10

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

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