Każdy chce czuć się lepiej od innych, taka nasza próżna natura. Wyróżniać się stylem lub być sprawniej wybranym na rozmowie rekrutacyjnej. Jak i w życiu, tak i w HTML. I właśnie w HTML na pewno zdarzyło Ci się pracować z elementem SELECT, zwanym listą rozwijaną lub drop-down list. Jeśli tak, to musiałeś dokonywać wyborów, czyli wybierać jakąś pozycję z takiej listy. A po wybraniu być może i jakoś ją docenić!
Punkt 1 listy.
Zaczniemy od przykładowego kodu.
<fieldset>
<input type="checkbox" value="1" id="o1" /><label for="o1">Odpowiedź 1</label>
<input type="checkbox" value="2" id="o2" checked/><label for="o2">Odpowiedź 2</label>
</fieldset>
<fieldset>
<select>
<option>---</option>
<option value="1">Opcja 1</option>
<option value="2" selected>Opcja 2</option>
<option value="3">Opcja 3</option>
</select>
</fieldset>
Mamy tu trzy kontrolki formularza, biorąc pod uwagę typy - właściwie dwa. INPUT o typie checkbox oraz nasz tytułowy SELECT. Jeden z checkbox'ów jest zaznaczony (atrybut checked), jak również jedna z opcji jest zaznaczona (atrybut selected).
Jak dodać klasy i stylu dla wybranej opcji?
Stylowałeś kiedyś zaznaczony checkbox? Pewnie przez pseudoklasę :checked
input:checked {
box-shadow: 0 0 0 3px red;
}
A jak ostylować zaznaczoną opcję listy? Oczywiście przez pseudoklasę :selected. No...próbuj! I co? Narzuca się jedna z odpowiedzi, ale przemilczmy.
Okazuje się, że wybrana OPTION podlega również pseudoklasie :checked. Czyli:
option:checked {
color:#f00;
}
Tą pseudoklasę możemy z powodzeniem stosować również w JavaScript. Zamiast tworzyć kombinacje alpejskie typu:
var select = document.querySelector('select');
var option = select.options[select.selectedIndex];
alert(option.value);
Robimy prosty skłon po opcję:
var option = document.querySelector('select option:checked');
alert(option.value);
Dziś nie pozostawiam Ci wyboru i zapraszam na kolejną ucztę blogową. No other options!
Przydatne linki:
Specyfikacja HTML dotycząca :checked