HTML selezionare l'opzione separatore

Come si crea un separatore in un tag select?

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

L'approccio per le opzioni per disabili sembra essere il migliore ed essere il migliore supportato. Ho anche incluso un esempio di utilizzo dell'optgroup.

optgroup (in questo modo fa schifo):

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

opzione disabilitata (un po 'meglio):

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

E se vuoi essere davvero fantasioso, usa il carattere di disegno della casella unicode orizzontale.
(MIGLIORE OPZIONE!)

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

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

Provare:

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

Questo è un vecchio thread, ma poiché nessuno ha pubblicato una risposta simile, lo aggiungerò perché è il mio modo preferito di separazione.

Trovo che usare i trattini e un po 'come un pugno nell'occhio in quanto potrebbe non essere all'altezza della larghezza della casella di selezione. Quindi, preferisco usare i CSS per creare i miei separatori ... una semplice colorazione di sfondo.

<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 non si desidera utilizzare l'elemento optgroup, inserire invece i trattini in un elemento opzione e assegnargli l'attributo disabilitato. Sarà visibile, ma disattivato.

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

Invece del normale hyphon l'ho sostituito usando un simbolo a barra orizzontale dal set di caratteri esteso, non sembrerà molto bello se l'utente si trova in un altro paese che sostituisce quel personaggio ma funziona bene per me. C'è una serie di diversi capitoli che potresti usare per alcuni grandi effetti e non ci sono css coinvolti.

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

Definire una classe in CSS:

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

Scrivi in ​​HTML:

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

Sto trasformando il commento di @Laurence Gonsalves in una risposta perché è l'unico che funziona semanticamente e non sembra un hack.

Prova ad aggiungere questo al tuo foglio di stile:

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

Aspetto molto meno sdolcinato di un mucchio di trattini.

un altro modo è quello di utilizzare un'immagine di sfondo css 1x1 sull'opzione che sembra funzionare solo con Firefox e avere un 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/

o per usare javascript (jquery) per:

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

vedi anche Come posso aggiungere una linea orizzontale in un controllo di selezione html?

Se è solo WebKit, è possibile utilizzare <hr> per creare un vero separatore.

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

È possibile utilizzare il trattino "-". Non ha spazi visibili tra ogni personaggio.
(In alcuni caratteri!)

In HTML:

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

O in XHTML:

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

Questo è sempre il migliore.

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

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

puoi fare anche questo. è facile e fai in modo che il divisore selezioni l'elenco a discesa.

Ho scelto di alternare condizionatamente il colore e lo sfondo. Impostando un ordinamento e con vue.js, ho fatto qualcosa del genere:

<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