Comment créer des listes déroulantes?

Question

J'ai fait de nombreuses recherches sur Internet, mais je n'ai rien trouvé d'utile sur la façon de styliser la partie déroulante d'une liste déroulante dans un formulaire. J'apprécierais un pointeur dans la bonne direction. Merci.

Answer 1

Comme mentionné ci-dessus, il est à peu près impossible d'utiliser html directement, j'ai eu de bons résultats avec jQuery Combobox cependant.

Answer 2

Vous pouvez appliquer des styles à l'aide du sélecteur SELECT ou appliquer un nom de classe à un élément SELECT. Cependant, vous rencontrerez des problèmes avec IE < 8 en appliquant des choses comme des frontières à l'élément.

Vous pouvez ensuite cibler les options à l'aide du sélecteur OPTION.

SELECT { border: solid 1px red; font-weight: bold; } 
OPTION { background:green; font-style: italic; } 

devrait vous donner un menu déroulant avec une bordure rouge (si vous utilisez FF ou IE8 en mode standard) avec le texte en gras, et les options devraient être en italique avec un fond vert.

Answer 3

C'est possible, mais pour le moins compliqué. Vous ne pouvez pas styliser la partie déroulante d'une liste déroulante de manière cohérente sur différents navigateurs car ils les supportent tous de différentes manières (je veux dire un support très varié). Quand j'ai eu un problème comme celui-ci il y a quelques mois, la seule solution que j'ai trouvée était, en utilisant javascript, de convertir la liste déroulante en un menu déroulant ul/li, que je pourrais styler. Bien sûr, il existe de nombreux événements nécessitant une manipulation, comme la sélection d'une valeur.

Heureusement, il existe un plugin pour JQuery qui permet de faire une tâche triviale. (Le lien Brainfault donné pour ce plugin ne fonctionne plus.)

Answer 4

J'ai travaillé sur le même problème pendant un moment. Venu avec une solution assez simple en utilisant un div titulaire qui est plus courte que la liste déroulante elle-même. J'utilise également une image d'arrière-plan pour obtenir la flèche de liste déroulante pour regarder comme je l'aime. Check it out http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

Tout ce dont vous avez besoin est un div autour de la balise select et de 2 classes CSS.

HTML:

<div class="mainselection"> 
<select name="State" id="input7"> 
    <option></option> 
    <option value="Alabama">Alabama</option> 
    ... 
    <option value="Wisconsin">Wisconsin</option> 
    <option value="Wyoming">Wyoming</option>        
</select> 
</div> 

CSS:

.mainselection { 
    overflow:hidden; 
    width:350px; 
    margin-left:35px; 
    background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px; 
    /* dropdown_arrow.png is a 31x28 image */ 
} 
select { 
    border:0; 
    background:transparent; 
    height:32px; 
    border:1px solid #d8d8d8; 
    width:350px; 
    -webkit-appearance: none; 
} 

Puis, après un peu de vérification Javascript, je peux aussi changer la classe sur la div .dropdownbad pour lui donner une bordure rouge.

.dropdownbad { 
    border:2px solid #c13339; 
} 

Les états par défaut et d'erreur sont présentés ici:

Answer 5

Depuis cette question a été posée, la technologie du navigateur a beaucoup amélioré. Vous pouvez maintenant créer un menu déroulant personnalisé entièrement en utilisant CSS sans javascript.

Vérifiez ce blog post: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 6

Je dropdowns dans mon panier qui étaient gris clair sinon sélectionné.J'ai pu tourner le noir de texte avec ceci:

#customer_details ul { 
color: black !important; 
} 

C'était tout ce que je devais changer, je ne peux pas dire ce que vous pourriez faire.

Answer 7

Consultez ce site Web pour CSS seule solution: http://www.htmllion.com/default-select-dropdown-style-just-css.html

HTML:

<form> 
    <select> 
     <option>CSS</option> 
     <option>HTML </option> 
     <option>HTML 5</option> 
    </select> 
</form> 

CSS:

<style> 
    select { 
     border: 0 !important; /*Removes border*/ 
     -webkit-appearance: none; /*Removes default chrome and safari style*/ 
     -moz-appearance: none; /* Removes Default Firefox style*/ 
     background: #0088cc url(img/select-arrow.png) no-repeat 90% center; 
     width: 100px; /*Width of select dropdown to give space for arrow image*/ 
     text-indent: 0.01px; /* Removes default arrow from firefox*/ 
     text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/ 
     color: #FFF; 
     border-radius: 15px; 
     padding: 5px; 
     box-shadow: inset 0 0 5px rgba(000,000,000, 0.5); 
    } 
</style>