I'm using placeholders for text inputs which is working out just fine. Ale chciałbym również użyć zmiennych dla moich pól wyboru. Oczywiście mogę po prostu użyć tego kodu:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
Ale 'Wybierz swoją opcję' jest w kolorze czarnym zamiast jasnoszarego. Więc moje rozwiązanie może być ewentualnie oparte na CSS. jQuery jest również w porządku.
To tylko sprawia, że opcja jest szara w dropdown (więc po kliknięciu strzałki):
option:first {
color: #999;
}
Pytanie brzmi: Jak ludzie tworzą placeholdery w selectboxach? Ale to już zostało odpowiedziane, dzięki.
A użycie tego powoduje, że wybrana wartość zawsze jest szara (nawet po wybraniu prawdziwej opcji):
select {
color: #999;
}
Właśnie natknąłem się na to pytanie, a oto'co działa w Firefoksie i Chrome (przynajmniej):
<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>
Opcja Disabled zatrzymuje wybór <option>
zarówno za pomocą myszy, jak i klawiatury, podczas gdy użycie 'display:none'
pozwala użytkownikowi nadal wybierać za pomocą strzałek klawiatury. Styl 'display:none'
po prostu sprawia, że pole listy wygląda 'ładnie'.
Uwaga: Użycie pustego atrybutu value
w opcji "placeholder" pozwala walidacji (wymagany atrybut) obejść posiadanie "placeholder", więc jeśli opcja nie jest zmieniana, ale jest wymagana, przeglądarka powinna zachęcić użytkownika do wybrania opcji z listy.
Uaktualnienie (lipiec 2015):
Potwierdzono, że ta metoda działa w następujących przeglądarkach:
Uaktualnienie (październik 2015):
Usunąłem style="display: none"
na rzecz atrybutu HTML5 hidden
, który ma szerokie wsparcie. Element hidden
ma podobne cechy jak display: none
w Safari, Internet Explorer, (Project Spartan wymaga sprawdzenia) gdzie opcja
jest widoczna w dropdown, ale nie jest wybieralna.
Uaktualnienie (styczeń 2016):
Kiedy element select
jest required
, pozwala to na użycie pseudoklasy CSS :invalid
, która pozwala na stylizację elementu select
, gdy jest on w stanie "placeholder". :invalid
działa tutaj z powodu pustej wartości w placeholder option
.
Gdy wartość zostanie ustawiona, pseudoklasa :invalid
zostanie usunięta. Opcjonalnie możesz także użyć :valid
jeśli chcesz.
Większość przeglądarek obsługuje tę pseudo-klasę. Internet Explorer 10 i nowsze. Działa to najlepiej z niestandardowymi stylizowanymi elementami select
; w niektórych przypadkach, np. (Mac w Chrome / Safari) będziesz musiał zmienić domyślny wygląd pola select
tak, aby wyświetlane były pewne style, tj. background-color
i color
. Możesz znaleźć kilka przykładów i więcej o kompatybilności na developer.mozilla.org.
Natywny wygląd elementu Mac w Chrome:
.
Użycie zmienionego elementu obramowania Mac w Chrome:
Coś w tym stylu:
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();
Przykład działania: