Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.

/* Matches any checked/selected radio, checkbox, or option */
:checked {
  margin-left: 25px;
  border: 1px solid blue;

The user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.

Note: Because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser.




Basic example


  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>

  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>


select {
  margin: 8px;

/* Labels for checked inputs */
input:checked + label {
  color: red;

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;


Toggling elements with a hidden checkbox

This example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using JavaScript.


<input type="checkbox" id="expand-toggle" />

    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>


/* Hide the toggle checkbox */
#expand-toggle {
  display: none;

/* Hide expandable content by default */
.expandable {
  visibility: collapse;
  background: #ddd;

/* Style the button */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;

/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;

/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;


Image gallery

You can use the :checked pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail. See this demo for a possible cue.

Note: For an analogous effect, but based on the :hover pseudo-class and without hidden radioboxes, see this demo, taken from the :hover reference page.


Specification Status Comment
HTML Living Standard
The definition of ':checked' in that specification.
Living Standard No change.
The definition of ':checked' in that specification.
Recommendation Defines the semantic regarding HTML.
Selectors Level 4
The definition of ':checked' in that specification.
Working Draft No change.
CSS Basic User Interface Module Level 3
The definition of ':checked' in that specification.
Recommendation Link to Selectors Level 3.
Selectors Level 3
The definition of ':checked' in that specification.
Recommendation Defines the pseudo-class, but not the associated semantic

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:checkedChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support 2Chrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android ?


Full support  
Full support
Compatibility unknown  
Compatibility unknown

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: mdnwebdocs-bot,