CSS3 :checked-pseudoklasse

Definition og brug

CSS :checked Pseudoklasser bruges til at matche enhver markeret <input> eller <option> elementer.

Dette gælder for <input type="radio">, <input type="checkbox"> og <select>-elementernes <option>.

Eksempel

Eksempel 1

Indstil en fin rød omrids for alle markerede <input>-elementer:

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

Prøv det selv

Eksempel 2

Indstil forskellige stilarter for radioafkrydsningsfelt, krydsfelt og valgmuligheder, når de er markeret:

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

Prøv det selv

CSS-syntaks

:checked {
  css-udtryk;
}

Tekniske detaljer

Version: CSS3

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter pseudoklassen.

Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 9.6