Comment puis-je style forme de listes déroulantes?

J'ai cherché un peu partout sur Internet mais n'ai pas trouvé quelque chose d'utile sur la façon de style de la liste déroulante partie d'une liste déroulante dans un formulaire. J'apprécierais un pointeur dans la bonne direction. Merci.

Drôle, j'ai passé 3 heures à récurer le web la semaine dernière pour la même choses et tout ce que j'ai trouvé liées à redessiner le contrôle. Il semble que IE 8 va intégrer le soutien pour cela, mais pour l'instant c'est l'un de ceux duh des choses qui ne semblent pas être fait par le biais de la norme CSS

OriginalL'auteur fmz | 2009-08-26

css

0

Comme mentionné ci-dessus, il est à peu près impossible de le faire à l'aide de droites html, j'ai eu de bons résultats avec jQuery Combobox.

OriginalL'auteur Jon Hadley
32

J'ai travaillé sur le même problème pendant un certain temps. Venu avec une jolie solution simple à l'aide d'un titulaire de la div qui est plus court que la liste déroulante. J'ai aussi utiliser une image d'arrière-plan pour obtenir les listes déroulantes flèche pour regarder la façon dont je l'aime. Check it out http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

Tous vous avez besoin est un div autour de la balise select et 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 Javascript de vérification, je peux également changer la classe sur la div pour .dropdownbad pour lui donner une bordure rouge.
```
.dropdownbad {
    border:2px solid #c13339;
}
```
La valeur par défaut et les états d'erreur sont affichés ici:

Comment est-ce pas le #1 réponse?!?
C'est un grand awnser, tellement je suis gonig de demander à @fmz de l'accepter!

OriginalL'auteur Daniel
9

Vous pouvez appliquer des styles à l'aide de l'SÉLECTIONNEZ sélecteur ou de l'application d'un nom de classe à un élément SELECT. Toutefois, vous rencontrez des problèmes avec IE < 8 l'application des choses comme les frontières de l'élément.

Vous pouvez ensuite les options de la cible en utilisant l'OPTION de sélection.
```
SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }
```
Devrait vous donner une liste déroulante avec une bordure rouge (si vous utilisez des FF ou IE8 en mode standard) avec le texte en gras, et les options doivent être en italique avec un fond vert.

En outre, vous pouvez utiliser les attributs de CLASSE sur l'OPTION éléments, de sorte que vous pouvez le style haut et en bas des options différentes (dans le cas où vous souhaitez ajouter un bord supérieur ou inférieur ou quoi que ce soit).

OriginalL'auteur HackedByChinese
1

Son possible, mais alambiqué pour dire le moins. Vous ne pouvez pas vraiment de style de la liste de partie des, une liste déroulante consistantly sur différents navigateurs comme ils prennent tous en charge de différentes façons (je veux dire vraiment varié de soutien).

Quand j'ai eu un problam comme ça il y a quelques mois, la seule solution que j'ai trouvé était, à l'aide de javascript, de convertir la liste déroulante dans un ul/li menu déroulant que j'ai pu style. Bien sûr, il y a de nombreux événements qui ont besoin de manipulation, comme la sélection d'une valeur.

Heureusement il y a un plugin pour JQuery qui permet à ce être une tâche triviale. (Le Brainfault lien pour ce plugin ne fonctionne plus.)

OriginalL'auteur Jaimal Chohan

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>

Veuillez ajouter des références à partir du site web lui-même

OriginalL'auteur h3lL0W0RLd

0

Depuis que cette question a été posée, la technologie du navigateur est beaucoup améliorée. Vous pouvez maintenant créer un menu déroulant entièrement à l'aide de CSS sans javascript.

Consultez cet article de blog:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

C'est un menu déroulant pas d'une liste déroulante dans un formulaire
Vous êtes si mal. Cette question est au sujet d'un DropDownList / Sélectionnez bloquer. Votre lien décrit en détail comment créer un ddl/sélectionner comme liste non ordonnée. Pas la même chose.

OriginalL'auteur Andrew Mao
0

J'ai des listes déroulantes dans mon panier qui étaient gris clair si non sélectionné. J'ai été en mesure de transformer le texte en noir avec ceci:
```
#customer_details ul {
color: black !important;
}
```
C'était tout ce que je besoin de changer, donc je ne peux pas dire ce que vous pourriez faire.

L'OP veut clairement faire plus que simplement changer la couleur du texte.

OriginalL'auteur Eric J Tischler

Vous devez vous connecter pour publier un commentaire.