Modification de la couleur de la liste déroulante de l'espace réservé dans le formulaire

Je suis en train de faire le formulaire avec une liste déroulante d'élément. Je veux que le texte de l'espace réservé à être gris, tout comme dans la "saisie de texte" formes, et la réponse à être noir.

J'ai réussi à faire les réponses d'une autre couleur dans le menu déroulant, mais lorsque vous la sélectionnez, il change la couleur de l'espace réservé.

Le code que j'utilise;

<select class="remindmedropdown">
<option value="0" selected disabled>QUESTION</option>
<option value="1">Answer 1</option>
<option value="2">Answer 2</option>
<option value="3">Answer 3</option>
</select>

CSS:

.remindmedropdown {
width: 240px;
height: 40px;
background-color: #FFF;
padding: 10px;
margin-right: 30px;
outline-color:#A7D5E4;
color:#990000;
}



.remindmedropdown option { color: gray; }

Edit: jsfiddle http://jsfiddle.net/QkYC9/1/

  • Avez-vous essayé avec .remindmedropdown option { color: gray !important; } ? - edit : il y a une étrange </font> dans ton code choisi
  • qu'est ce que </font> faire là-dedans? police éléments sont obsolètes et les mauvaises pratiques..et je n'ai même pas voir un début <font> n'importe où
  • étiquette de police supprimé! l' !important solution ne fonctionne pas malheureusement.
  • avez-vous essayé d'utiliser l' :premier enfant sélecteur CSS?
InformationsquelleAutor JamesM | 2013-05-02
  1. 0

    Essayez ceci:

    .remindmedropdown option:checked { color: gray; }

    Pour la modification dynamique avec javascript:

    <select id="selection" class="remindmedropdown" onchange="colorSet()">
...
</select>

<script>
function colorSet(){
    document.getElementById('selection').style.color="black";
}
</script>
    • Cela devrait fonctionner, en théorie. Voir aussi: stackoverflow.com/questions/8619406/...
    • Je ne sais pas pourquoi, mais ça ne fonctionne pas?
    • Pour déroulante fermé vérifier Mike lien dans les commentaires.
    • J'ai essayé en utilisant cela, mais rien ne s'est passé (et pour être honnête, je ne sais pas vraiment comment ça fonctionne). Je l'ai mis dans un jsfiddle, et comme vous pouvez le voir, lorsqu'il est sélectionné, il reste gris. jsfiddle.net/QkYC9/1
    • lorsque vous sélectionnez un élément option, le texte va à l'sélectionnez l'élément sélectionné lorsque vous avez besoin de changer le sélectionner ou .remindmedropdown couleur. Si vous souhaitez modifier la couleur d'événement que vous devez utiliser javascript.
    • vérifier ma mise à jour avec un simple code javascript. Ajout de l'attribut id pour sélectionner l'élément. Ajouté événement onchange pour sélectionner l'élément. Ajouté javascript fonction. Que <script> code devrait aller à la section d'en-tête du document
    • Parfait, merci beaucoup!
    • juste pour info Si vous allez avoir plus d'un de ces types de liste déroulante d'éléments sur votre page, ce code ne fonctionnera pas - voir ma réponse ci-dessous pour une solution qui fonctionne avec plus d'un.
    • Il est nouveau pour le javascript, faites-lui comprendre que quand il est là.

    InformationsquelleAutor Francisco Afonso
  2. 2

    ajouter ce script à votre page:

    <script type="text/javascript">
    function changeColor(dropdownList){
        if (dropdownList.value > 0) {
            dropdownList.style.color = 'black';
        }
    }       
</script>

    Alors, pour toute liste déroulante qui vous souhaitez l'utiliser, ajouter une référence à la "changeColor" fonction comme ceci:

    <select class="remindmedropdown" onChange="changeColor(this)">

    de l'élément script devrait aller entre <head> et </head> dans votre document

    • C'est ma réponse.
    • le mien fonctionne pour tout sélectionner l'élément, et pas seulement l'un avec un ID de "sélection". Je n'ai pas de copie de votre code, désolé. Vous n'êtes également pas de vérifier la valeur de la <select> dans ton code, ce qui semble d'importance dans ce cas.
    • Et jamauss, merci à toi pour ton aide!
    • Vous n'étiez pas même à l'aide de javascript lol.
    • ouais c'est pourquoi j'ai posté d'autres non-jQuery réponse. Votre réponse, alors que cela fonctionne, aussi des cravates le code d'un élément spécifique ID, ce qui n'est pas vraiment nécessaire et la fonction inutile pour plus que juste un seul <select> élément. "LOL".
    • 3 retouches après mes 3 réponses. Juste..lol Si vous voulez corriger une réponse, il suffit de laisser un commentaire et de mauvais de le modifier. Ce n'est pas une réputation de course.
    • Je ne sais pas ce que je dois dire pour vous convaincre, je n'ai pas de copie de votre réponse. Je l'ai écrit moi-même, testé dans Firebug, puis posté mon code. J'ai écrit JS pour les+ de 10 ans, je n'ai pas besoin de copier le code de quelqu'un poste ici. Mais, tout ce que vous voulez croire...

    InformationsquelleAutor jamauss