separador de opciones de selección html

¿Cómo se hace un separador en una etiqueta de selección?

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

El enfoque de opción deshabilitada parece verse mejor y ser el mejor soportado. También he incluido un ejemplo de uso de optgroup.

optgroup (de esta manera apesta):

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

opción deshabilitada (un poco mejor):

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

Y si quieres ser realmente elegante, usa el carácter de dibujo de cuadro unicode horizontal.
(¡MEJOR OPCIÓN!)

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

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

Tratar:

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

Este es un hilo antiguo, pero como nadie publicó una respuesta similar, agregaré esto, ya que es mi forma preferida de separación.

Considero que usar guiones y demás es algo molesto, ya que podría estar por debajo del ancho del cuadro de selección. Por lo tanto, prefiero usar CSS para crear mis separadores ... un simple color de fondo.

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

Si no desea utilizar el elemento optgroup, coloque los guiones en un elemento de opción y dele el atributo deshabilitado. Será visible, pero atenuado.

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

En lugar del hyphon normal, lo reemplacé usando un símbolo de barra horizontal del conjunto de caracteres extendido, no se verá muy bien si el usuario está en otro país que reemplaza ese carácter pero funciona bien para mí. Existe una gama de diferentes capítulos que puede usar para obtener algunos efectos excelentes y no hay CSS involucrados.

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

Definir una clase en CSS:

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

Escribe en HTML:

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

Estoy haciendo el comentario de @Laurence Gonsalves en una respuesta porque es la única que funciona semánticamente y no parece un truco.

Intente agregar esto a su hoja de estilo:

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

Mucho menos cursi que un montón de guiones.

otra forma es usar una imagen de fondo css 1x1 en la opción que solo parece funcionar con firefox y tener un "----" respaldo

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

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

vea también ¿Cómo agrego una línea horizontal en un control de selección html?

Si es solo WebKit, puede usarlo <hr>para crear un separador real.

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

Podrías usar el guión em "-". No tiene espacios visibles entre cada personaje.
(¡En algunas fuentes!)

En HTML:

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

O en XHTML:

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

Este es el mejor siempre.

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

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

Puedes hacer este también. es fácil y hace que la lista desplegable de selección de divisor.

Elegí alternar condicionalmente el color y el fondo. Al establecer un orden de clasificación y con vue.js, hice algo como esto:

<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