separador de opções de seleção html

Como você cria um separador em uma tag de seleção?

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

A abordagem da opção desativada parece ter a melhor aparência e o melhor suporte. Também incluí um exemplo de uso do optgroup.

optgroup (desta maneira meio que é péssimo):

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

opção desativada (um pouco melhor):

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

E se você quiser ser realmente chique, use o caractere de desenho da caixa unicode horizontal.
(MELHOR OPÇÃO!)

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

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

Experimentar:

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

Este é um tópico antigo, mas como ninguém postou uma resposta semelhante, adicionarei isso, pois é o meu modo preferido de separação.

Acho que usar traços e tal é um pouco desagradável, pois pode ficar aquém da largura da caixa de seleção. Então, prefiro usar CSS para criar meus separadores ... uma simples coloração de fundo.

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

Se você não quiser usar o elemento optgroup, coloque os traços em um elemento opcional e atribua o atributo desativado. Será visível, mas acinzentado.

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

Em vez do hífon comum, substituí-lo usando um símbolo de barra horizontal do conjunto de caracteres estendidos, não ficará muito bom se o usuário estiver em outro país que substitua esse caractere, mas funcione bem para mim. Existe uma variedade de chacters diferentes que você pode usar para obter ótimos efeitos e não há CSS envolvido.

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

Defina uma classe em CSS:

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

Escreva em HTML:

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

Estou transformando o comentário de @Laurence Gonsalves em uma resposta, porque é o único que funciona semanticamente e não parece um hack.

Tente adicionar isso à sua folha de estilo:

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

Muito menos brega do que um monte de traços.

Outra maneira é usar uma imagem de fundo css 1x1 na opção que parece funcionar apenas com o Firefox e ter um fallback "----"

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

ou usar javascript (jquery) para:

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

consulte também Como adiciono uma linha horizontal em um controle de seleção html?

Se for apenas WebKit, você pode usar <hr> para criar um separador real.

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

Você pode usar o em dash "-". Não há espaços visíveis entre cada personagem.
(Em algumas fontes!)

Em HTML:

<valor da opção = "————————————” desativado> ——————————— </option>

Ou em XHTML:

<valor da opção = "———————————" disabled = "disabled"> ———————————— </option>

Este é o melhor sempre.

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

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

você pode fazer isso também. é fácil e faça com que o divisor selecione a lista suspensa.

Optei por alternativamente condicionalmente cor e fundo. Definindo uma ordem de classificação e com o vue.js, fiz algo assim:

<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