Sto usando i segnaposto per gli input di testo, il che funziona bene. Ma vorrei usare un segnaposto anche per i miei selectbox. Naturalmente posso semplicemente usare questo codice:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
Ma la 'Seleziona la tua opzione'è in nero invece che in grigio chiaro. Quindi la mia soluzione potrebbe essere basata su CSS. Anche jQuery va bene.
Questo rende solo l'opzione grigia nel dropdown (quindi dopo aver cliccato la freccia):
option:first {
color: #999;
}
La domanda è: come fa la gente a creare i segnaposto nelle selectbox? Ma è già stato risposto, grazie.
E usando questo il risultato è che il valore selezionato è sempre grigio (anche dopo aver selezionato una vera opzione):
select {
color: #999;
}
Mi sono appena imbattuto in questa domanda, ed ecco cosa funziona in Firefox e Chrome (almeno):
<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>
L'opzione Disabled impedisce che la <opzione>
venga selezionata sia con il mouse che con la tastiera, mentre usando semplicemente 'display:none'
l'utente può ancora selezionare tramite le frecce della tastiera. Lo stile 'display:none'
fa solo sembrare la casella della lista 'bella'.
Nota: l'uso di un attributo value
vuoto sull'opzione "segnaposto" permette alla validazione (attributo required) di aggirare il fatto di avere il "segnaposto", quindi se l'opzione non viene cambiata, ma è richiesta, il browser dovrebbe chiedere all'utente di scegliere un'opzione dalla lista.
Aggiornamento (luglio 2015):
Questo metodo è confermato funzionante nei seguenti browser:
Aggiornamento (ottobre 2015):
Ho rimosso lo style="display: none"
in favore dell'attributo HTML5 hidden
che ha un ampio supporto. L'elemento hidden
ha tratti simili al display: none
in Safari, Internet Explorer, (Project Spartan deve controllare) dove l'opzione option
è visibile nel dropdown, ma non è selezionabile.
Aggiornamento (gennaio 2016):
Quando l'elemento select
è required
permette l'uso della pseudo-classe CSS :invalid
che permette di dare stile all'elemento select
quando è nel suo "placeholder" stato. :invalid
funziona qui a causa del valore vuoto nel segnaposto option
.
Una volta che un valore è stato impostato, la pseudo-classe :invalid
sarà abbandonata. Puoi opzionalmente usare anche :valid
se lo desideri.
La maggior parte dei browser supporta questa pseudo-classe. Internet Explorer 10 e successivi. Questo funziona meglio con elementi di selezione
con stile personalizzato; in alcuni casi, ad esempio (Mac in Chrome / Safari) è necessario modificare l'aspetto predefinito della casella di selezione
in modo che vengano visualizzati alcuni stili, ad esempio, background-color
e color
. Puoi trovare alcuni esempi e altre informazioni sulla compatibilità su developer.mozilla.org.
Aspetto dell'elemento nativo Mac in Chrome:
Utilizzo dell'elemento con bordo alterato Mac in Chrome:
Qualcosa del genere:
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();
Esempio di lavoro: