Selektory#
Pseudokalsa nieokreślenia#
:indeterminate { /* deklaracje */ }Pseudoklasa :indeterminate reprezentuje elementy interfejsu użytkownika (wejścia), które w danej chwili znajdują się w stanie nieokreślonym.
Najnowszy HTML5 podaje listę elementów ze stanem nieokreślenia, które będą pasowały do pseudoklasy :indeterminate. Dotyczy to przełączników (czyli elementów input posiadających stan zaznaczenia lub odznaczenia) oraz pasków postępu (elementów progress).
Z praktycznego punktu widzenia całość ma zastosowanie głównie w przypadku skryptów, gdzie dynamiczna zmiana pewnych właściwości w elementach będzie miała wpływ na działanie pseudoklasy nieokreślenia. Dla przykładu, niektóre kontrolki posiadają właściwość indeterminate z domyślną boolowską wartością false. Wystarczy z poziomu skryptu zmienić ją na boolowskie true, a element będzie wybierany przez pseudoklasę :indeterminate, co oznacza, że użytkownik nie dokonał jeszcze żadnego wyboru. Pozytywna wartość tego atrybutu reprezentuje "trzeci fikcyjny stan" elementu (obok zaznaczenia i odznaczenia), który musi przesłonić (wizualnie) wcześniejsze stany. Zaznaczenie lub odznaczenie kontrolki spowoduje, że atrybut indeterminate powróci do wartości false, i w konsekwencji ma informować, że wybór został przeprowadzony.
Kontrolkom w stanie nieokreślonym aplikacje klienckie mogą przypisywać domyślne formatowanie, ale w żaden sposób nie zostało ono ustandaryzowane. Jest to szczególnie widoczne w przeglądarkach internetowych, gdzie odmienna prezentacja elementów UI zdarza się bardzo często.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:indeterminate {outline: 5px solid red; border: 5px solid red;}
</style>
<script>
window.onload = function(){
document.getElementsByTagName("input")[2].indeterminate = true;
}
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Formularz</legend>
<p>
<label><input type="radio" name="plec" value="f">Kobieta</label>
<label><input type="radio" name="plec" value="m">Mężczyzna</label>
</p>
<p>
<label><input type="checkbox" checked="checked" name="lan" value="en">Angielski</label>
<label><input type="checkbox" checked="checked" name="lan" value="fr">Francuski</label>
<label><input type="checkbox" name="lan" value="de">Niemiecki</label>
</p>
<p><progress></progress></p>
<p><progress max="100" value="50"></progress></p>
</fieldset>
</form>
</body>
</html>Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :indeterminate prawidłowo; pomijane są grupy przycisków typu radio, w których nie wybrano żadnego elementu.