séparateur d'options de sélection html

Question

Comment faire un séparateur dans une balise de sélection ?

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

Answer 1

L'approche de l'option handicapée semble être la plus belle et la mieux soutenue. J'ai également inclus un exemple d'utilisation de l'optgroup.

optgroup (cette méthode est plutôt mauvaise) :

<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 être vraiment fantaisiste, utilisez le caractère horizontal de dessin de boîte unicode.
(MEILLEURE OPTION !)

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

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

Answer 2

Essayez :

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

Answer 3

Si vous ne souhaitez pas utiliser l'élément optgroup, placez les tirets dans un élément option et attribuez-lui l'attribut disabled. Il sera visible, mais en grisé.

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

Answer 4

Au lieu de l'hymne normal, je l'ai remplacé par un symbole de barre horizontale provenant du jeu de caractères étendu. Cela ne sera pas très joli si l'utilisateur est dans un autre pays qui remplace ce caractère, mais cela fonctionne bien pour moi. Il y a toute une gamme de caractères différents que vous pouvez utiliser pour obtenir de grands effets et il n'y a pas de css impliqué.

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

Answer 5

Une autre solution consiste à utiliser une image d'arrière-plan css 1x1 sur l'option qui ne semble fonctionner qu'avec firefox et à avoir une solution de 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 le 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 ?