séparateur d'options de sélection html

Comment faites-vous un séparateur dans une balise de sélection?

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

L'approche de l'option désactivée semble être la meilleure et être la mieux prise en charge. J'ai également inclus un exemple d'utilisation de l'optgroup.

optgroup (de cette façon suce un peu):

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

option désactivée (un peu mieux):

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

Et si vous voulez vraiment être fantaisiste, utilisez le caractère de dessin de la boîte Unicode horizontale.
(MEILLEURE OPTION!)

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

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

Essayer:

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

C'est un vieux fil, mais comme personne n'a posté une réponse similaire, je vais l'ajouter car c'est mon moyen de séparation préféré.

Je trouve que l'utilisation de tirets et autres est quelque peu gênante car elle pourrait ne pas correspondre à la largeur de la zone de sélection. Donc, je préfère utiliser CSS pour créer mes séparateurs .. une simple coloration de fond.

<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 vous ne souhaitez pas utiliser l'élément optgroup, placez les tirets dans un élément option et donnez-lui l'attribut désactivé. Il sera visible, mais grisé.

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

Au lieu du trait d'union normal, je l'ai remplacé à l'aide d'un symbole de barre horizontale du jeu de caractères étendu, il ne sera pas très agréable si l'utilisateur est dans un autre pays qui remplace ce caractère mais fonctionne bien pour moi. Il existe une gamme de différents chapitres que vous pouvez utiliser pour de superbes effets et aucun CSS n'est impliqué.

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

Définissez une classe en CSS:

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

Écrivez en HTML:

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

Je fais du commentaire de @Laurence Gonsalves une réponse parce que c'est le seul qui fonctionne sémantiquement et ne ressemble pas à un hack.

Essayez d'ajouter ceci à votre feuille de style:

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

Beaucoup moins ringard qu'un tas de tirets.

une autre façon est d'utiliser une image d'arrière-plan css 1x1 sur l'option qui ne semble fonctionner qu'avec firefox et avoir un repli "----"

<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 d'utiliser javascript (jquery) pour:

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

voir aussi Comment ajouter une ligne horizontale dans un contrôle de sélection html?

S'il s'agit de WebKit uniquement, vous pouvez utiliser <hr>pour créer un véritable séparateur.

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

Vous pouvez utiliser le tiret cadratin "-". Il n'a pas d'espaces visibles entre chaque personnage.
(Dans certaines polices!)

En HTML:

<option value = "—————————————" désactivé> ————————————— </option>

Ou en XHTML:

<option value = "—————————————" désactivé = "désactivé"> ————————————— </option>

Celui-ci est toujours meilleur.

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

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

vous pouvez le faire aussi. c'est facile et faites diviseur sélectionner la liste déroulante.

J'ai choisi d'alterner conditionnellement la couleur et l'arrière-plan. En définissant un ordre de tri et avec vue.js, j'ai fait quelque chose comme ceci:

<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