Používam zástupné znaky pre textové vstupy, čo funguje dobre. Chcel by som však použiť zástupný symbol aj pre výberové políčka. Samozrejme, môžem použiť tento kód:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
Ale 'Vyberte si možnosť' je čierna namiesto svetlosivej. Takže moje riešenie by mohlo byť prípadne založené na CSS. jQuery je tiež v poriadku.
Vďaka tomu je možnosť sivá len v rozbaľovacom zozname (teda po kliknutí na šípku):
option:first {
color: #999;
}
Otázka znie: Ako ľudia vytvárajú zástupné znaky vo výberových poliach? Ale už bola zodpovedaná, na zdravie.
A použitie tohto spôsobuje, že vybraná hodnota je vždy sivá (aj po výbere skutočnej možnosti):
select {
color: #999;
}
Odpoveď bez CSS - bez JavaScriptu/jQuery:
-- begin snippet: js hide: false -->
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
Práve som narazil na túto otázku a tu je to, čo funguje vo Firefoxe a Chrome (aspoň):
<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>
Možnosť Disabled zabraňuje výberu <option>
pomocou myši aj klávesnice, zatiaľ čo len použitie 'display:none'
umožňuje používateľovi stále vyberať pomocou šípok na klávesnici. Štýl 'display:none'
len spôsobuje, že pole zoznamu vyzerá 'pekne'.
Poznámka: Použitie prázdneho atribútu value
na možnosti "placeholder" umožňuje validáciu (atribút required), ktorá obchádza prítomnosť atribútu "placeholder", takže ak sa možnosť'nemení, ale je povinná, prehliadač by mal vyzvať používateľa, aby vybral možnosť zo zoznamu.
Aktualizácia (júl 2015):
Je potvrdené, že táto metóda funguje v nasledujúcich prehliadačoch:
Aktualizácia (október 2015):
Odstránil som style="display: none"
v prospech atribútu HTML5 hidden
, ktorý má širokú podporu. Prvok hidden
má podobné vlastnosti ako display: none
v prehliadačoch Safari, Internet Explorer, (Projekt Spartan je potrebné skontrolovať), kde je možnosť
v rozbaľovacom zozname viditeľná, ale nie je vyberateľná.
Aktualizácia (január 2016):
Keď je prvok select
vyžadovaný
, umožňuje použitie pseudotriedy CSS :invalid
, ktorá umožňuje naštýlovať prvok select
, keď je v stave "placeholder". :invalid
tu funguje kvôli prázdnej hodnote v zástupnom prvku option
.
Po nastavení hodnoty sa pseudotrieda :invalid
zruší. Ak si to želáte, môžete voliteľne použiť aj :valid
.
Väčšina prehliadačov túto pseudotriedu podporuje. Internet Explorer 10 a novšie. Najlepšie to funguje s vlastnými štýlovými prvkami select
; v niektorých prípadoch, t.j. (Mac v Chrome/Safari), budete musieť zmeniť predvolený vzhľad poľa select
, aby sa zobrazovali určité štýly, t.j. background-color
a color
. Niektoré príklady a ďalšie informácie o kompatibilite nájdete na stránke developer.mozilla.org.
Natívny vzhľad prvku Mac v prehliadači Chrome:
Použitie zmeneného ohraničenia prvku Mac v Chrome:
Niečo také:
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();
Pracovný príklad: