CSS3 :checked-pseudoklass

Definition och användning

CSS :checked Pseudoklasser används för att matcha alla valda <input> eller <option> Element.

Detta gäller för <input type="radio">, <input type="checkbox"> och <select>-elementens <option>.

Exempel

Exempel 1

Sätt en tunn röd kontur på alla valda <input>-element:

input:checked {
  outline: 1px solid red;
}

Prova själv

Exempel 2

Ställ in olika stilar för att markera enskilda valknappar, kryssrutor och valoptioner när de är valda:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

Prova själv

CSS syntax

:checked {
  css deklarationer;
}

Tekniska detaljer

Webbläsarstöd

Talen i tabellen anger den första webbläsarversion som fullständigt stöder denna pseudoklass.