Ändern der Farbe der dropdown-Platzhalter in form

Ich mache Formular mit einem drop-down-element. Ich will, dass die Platzhalter-text in Grau, genau wie in der 'Texteingabe' Formen, und die Antwort darauf, schwarz zu sein.

Schaffte ich die Antworten der anderen Farbe in dem dropdown-Menü, aber wenn Sie es auswählen, es ändert sich die Farbe des Platzhalters.

Den code, den ich verwende;

<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/

  • Haben Sie versucht, mit .remindmedropdown option { color: gray !wichtig; } ? - edit : es ist eine seltsame </font> in der select-code
  • was ist das </font> doing in there? font-Elemente sind veraltet und schlechte Praxis..und ich weiß nicht einmal sehen, ein Anfang <font> überall
  • font-tag gelöscht! die !wichtig Lösung hat nicht funktioniert, leider.
  • Sie haben versucht, die Verwendung der :first-child CSS-Selektor?
InformationsquelleAutor JamesM | 2013-05-02
  1. 0

    Versuchen Sie dies:

    .remindmedropdown option:checked { color: gray; }

    Für die dynamische Veränderung mit javascript:

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

<script>
function colorSet(){
    document.getElementById('selection').style.color="black";
}
</script>
    • Sollte dies funktionieren, in der Theorie. Siehe auch: stackoverflow.com/questions/8619406/...
    • Ich weiß nicht warum, aber es funktioniert nicht?
    • Für dropdown-geschlossen, prüfen Sie, Mike ' s link in den Kommentaren.
    • Ich habe versucht, mit, dass, aber es ist nichts passiert (und um ehrlich zu sein, ich weiß wirklich nicht wie es funktioniert). Ich habe es in ein jsfiddle, und wie Sie sehen können, wenn es ausgewählt bleibt Grau. jsfiddle.net/QkYC9/1
    • wenn Sie die option-element der text geht auf das select-element so, wenn Sie ausgewählt, die Sie brauchen, um zu ändern, wählen Sie oder .remindmedropdown Farbe. Wenn Sie die Farbe ändern möchten, die auf Fall, Sie müssen javascript verwendet.
    • überprüfen Sie meine update-mit einfachen javascript-code. Hinzugefügt id-Attribut select-element. Hinzugefügt onchange-Ereignis auf select-element. Hinzugefügt javascript-funtion. Das <script> code sollte gehen-an-Kopf-Abschnitt des Dokuments
    • Perfekt, danke so viel!
    • nur FYI - Wenn Sie mehr als eine dieser Arten von dropdown-Elemente auf Ihrer Seite - dieser code funktioniert nicht - siehe meine Antwort weiter unten für eine Lösung, die die Arbeit mit mehr als einem.
    • Er ist mit javascript, lass ihn verstehen, dass, wenn er es ruft.

    InformationsquelleAutor Francisco Afonso
  2. 2

    fügen Sie dieses Skript auf Ihrer Seite:

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

    Dann, für jede dropdown-Liste, die Sie verwenden möchten, fügen Sie einen Verweis auf die "changeColor" Funktion wie diese:

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

    das script-element sollte gehen zwischen <head> und </head> in Ihrem Dokument

    • Das ist meine Antwort.
    • mir arbeitet für alle select-Elemente, nicht nur eines mit der ID "Auswahl". Ich wusste nicht, kopiere deinen code, sorry. Du bist auch nicht die Prüfung der Wert der <select> in deinem code, das scheint die Sache in diesem Fall.
    • Und jamauss, dir auch vielen Dank für deine Hilfe!
    • Sie werent sogar mit reinem javascript, lol.
    • ja, das ist der Grund, warum ich dies geschrieben, andere nicht-jQuery-Antwort. Ihre Antwort, während es funktioniert, verbindet sich auch der code an eine bestimmte element-ID, und die ist nicht wirklich notwendig und würde, wäre die Funktion nutzlos für mehr als nur eine einzige <select> - element. "LOL".
    • 3 Bearbeitungen nach meiner 3 Antworten. Nur..lol Wenn Sie möchten, um die richtige Antwort einfach einen Kommentar und schlecht zu Bearbeiten. Dies ist nicht ein Ruf Rennen.
    • Ich weiß nicht, was ich zu sagen brauchen, Sie zu überzeugen, ich wollte nicht kopieren Sie Ihre Antwort. Ich schrieb es selbst getestet es in Firebug, dann meinen code gepostet. Ich habe das schreiben von JS für 10+ Jahre, ich weiß nicht brauchen, kopieren Sie den code jemand Beiträge hier. Aber, was auch immer Sie glauben wollen...

    InformationsquelleAutor jamauss
Schreibe einen Kommentar