I' m mit Platzhaltern für Texteingaben, die funktioniert ganz gut. Aber ich möchte auch einen Platzhalter für meine Selectboxen verwenden. Natürlich kann ich einfach diesen Code verwenden:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
Aber das 'Wählen Sie Ihre Option' ist in schwarz statt hellgrau. Also meine Lösung könnte möglicherweise CSS-basiert sein. jQuery ist auch in Ordnung.
Das macht die Option nur im Dropdown grau (also nach dem Klick auf den Pfeil):
option:first {
color: #999;
}
Die Frage ist: Wie erstellt man Platzhalter in Selectboxen? Aber die Frage wurde ja schon beantwortet, danke.
Und das führt dazu, dass der ausgewählte Wert immer grau ist (auch nach der Auswahl einer echten Option):
select {
color: #999;
}
Eine Antwort ohne CSS, ohne JavaScript/jQuery:
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
Ich bin gerade über diese Frage gestolpert, und hier ist, was in Firefox und Chrome (zumindest) funktioniert:
Etwa so:
HTML:
<select id="choice">
<option value="0" selected="selected">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
CSS:
#choice option { color: black; }
.empty { color: gray; }
JavaScript:
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
Arbeitsbeispiel: