Jeg bruger pladsholdere til tekstinput, hvilket fungerer fint. Men jeg vil også gerne bruge en placeholder til mine selectboxes. Selvfølgelig kan jeg bare bruge denne kode:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
Men 'Vælg din indstilling' er i sort i stedet for lysegrå. Så min løsning kan muligvis være CSS-baseret. jQuery er også fint.
Det gør kun valgmuligheden grå i dropdown (altså efter klik på pilen):
option:first {
color: #999;
}
Spørgsmålet er: Hvordan opretter folk pladsholdere i selectboxes? Men det er allerede blevet besvaret, tak.
Og ved at bruge dette resulterer det i, at den valgte værdi altid er grå (selv efter valg af en rigtig mulighed):
select {
color: #999;
}
Jeg faldt lige over dette spørgsmål, og her er hvad der virker i Firefox og Chrome (i det mindste):
<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
<option value="" disabled selected hidden>Please Choose...</option>
<option value="0">Open when powered (most valves do this)</option>
<option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>
Indstillingen Disabled forhindrer <option>
i at blive valgt med både mus og tastatur, hvorimod hvis man blot bruger 'display:none'
, kan brugeren stadig vælge via tastaturpilene. Stilen 'display:none'
får blot listeboksen til at se 'pæn' ud.
Bemærk: Ved at bruge en tom value
-attribut på "placeholder" valgmuligheden kan validering (required-attribut) fungere uden om "placeholder", så hvis valgmuligheden ikke ændres, men er påkrævet, skal browseren bede brugeren om at vælge en valgmulighed fra listen.
opdatering (juli 2015):
Det er bekræftet, at denne metode fungerer i følgende browsere:
opdatering (oktober 2015):
Jeg har fjernet style="display: none"
til fordel for HTML5-attributten hidden
, som har bred understøttelse. Elementet hidden
har lignende træk som display: none
i Safari, Internet Explorer, (Project Spartan skal kontrolleres) hvor option
er synlig i dropdown, men den er ikke valgbar.
opdatering (januar 2016):
Når select
-elementet er required
, tillader det brug af CSS-pseudoklassen :invalid
, som gør det muligt at style select
-elementet, når det er i sin "placeholder" tilstand. :invalid
fungerer her på grund af den tomme værdi i pladsindehaveren option
.
Når en værdi er blevet sat, vil pseudoklassen :invalid
blive droppet. Du kan eventuelt også bruge :valid
, hvis du ønsker det.
De fleste browsere understøtter denne pseudoklasse. Internet Explorer 10 og nyere. Dette fungerer bedst med brugerdefinerede select
-elementer; i nogle tilfælde, f.eks. (Mac i Chrome/Safari), skal du ændre standardudseendet af select
-boksen, så visse stilarter vises, f.eks. background-color
og color
. Du kan finde nogle eksempler og mere om kompatibilitet på developer.mozilla.org.
Native elementudseende Mac i Chrome:
Brug af ændret kantelement Mac i Chrome:
Noget i denne retning:
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();
Arbejdseksempel: