html select option separator

Comment créez-vous un séparateur dans une balise select?

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

L’approche par options pour personnes handicapées 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 un peu nul):

  

Essayer:

  

C’est un vieux sujet, mais puisque personne n’a posté de réponse similaire, j’appendai ceci car c’est ma méthode de séparation préférée.

Je trouve que l’utilisation de tirets et de manière à être quelque peu horrible, car elle pourrait être inférieure à la largeur de la boîte de sélection. Donc, je préfère utiliser CSS pour créer mes séparateurs. Une simple couleur de fond.

  

Si vous ne voulez pas utiliser l’élément optgroup, placez plutôt les tirets dans un élément d’option et atsortingbuez-lui l’atsortingbut désactivé. Il sera visible mais grisé.

  

Au lieu du hyphon habituel, je l’ai remplacé par un symbole de barre horizontale provenant du jeu de caractères étendu, cela ne sera pas très agréable si l’utilisateur se trouve dans un autre pays qui remplace ce personnage mais fonctionne bien pour moi. Il existe toute une gamme de chacters différents que vous pouvez utiliser pour obtenir d’excellents effets et il n’ya pas de CSS impliqué.

  

Définir une classe en CSS:

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

Ecrire en HTML:

  

une autre façon est d’utiliser une image d’arrière-plan css 1×1 sur l’option qui semble seulement fonctionner avec Firefox et avoir un repli “—-”

  .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 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 append une ligne horizontale dans un contrôle de sélection HTML?

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

Essayez d’append ceci à votre feuille de style:

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

Beaucoup moins ringard qu’un tas de tirets.

Si WebKit uniquement, vous pouvez utiliser


pour créer un véritable séparateur.

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

Vous pouvez utiliser le tiret “-“. Il n’y a pas d’espaces visibles entre chaque caractère.
(Dans certaines fonts!)

En HTML:

  

Ou en XHTML:

  

Celui-ci est le meilleur toujours

     

   

vous pouvez le faire aussi. c’est facile et faire la liste déroulante de sélection de diviseur.

J’ai choisi d’alterner conditionnellement la couleur et l’arrière-plan. Définir un ordre de sorting et avec vue.js, j’ai fait quelque chose comme ceci: