Kawałek Kodu

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