:checked

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der :checked CSS Pseudoklassen-Selektor repräsentiert jedes Radio (<input type="radio">), Checkbox (<input type="checkbox">) oder Option (<option> in einem <select>-Element), das markiert oder auf einen on-Zustand umgeschaltet ist.

Probieren Sie es aus

label, input[type="submit"] { display: block; margin-top: 1em; } input:checked { border: none; outline: 2px solid deeppink; } 
<form> <p>How did you find out about us?</p> <label ><input name="origin" type="radio" value="google" checked /> Google</label > <label><input name="origin" type="radio" value="facebook" /> Facebook</label> <p>Please agree to our terms:</p> <label ><input name="newsletter" type="checkbox" checked /> I want to subscribe to a personalized newsletter.</label > <label ><input name="privacy" type="checkbox" /> I have read and I agree to the Privacy Policy.</label > <input type="submit" value="Submit form" /> </form>

Der Benutzer kann diesen Zustand aktivieren, indem er ein Element markiert/auswählt, oder deaktivieren, indem er das Element abwählt/demarkiert.

Hinweis: Da Browser <option>-Elemente oft als ersetzte Elemente behandeln, variiert die Möglichkeit, sie mit der :checked Pseudoklasse zu stylen, von Browser zu Browser. Anpassbare Select-Element Funktionalitäten können verwendet werden, um eine vollständige Anpassung von <option>-Elementen wie bei jedem regulären DOM-Element in unterstützten Browsern zu ermöglichen.

Syntax

css
:checked { /* ... */ }

Beispiele

Einfaches Beispiel

HTML

html
<div> <input type="radio" name="my-input" id="yes" value="yes" /> <label for="yes">Yes</label> <input type="radio" name="my-input" id="no" value="no" /> <label for="no">No</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in" /> <label for="opt-in">Check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">Apples</option> <option value="opt2">Grapes</option> <option value="opt3">Pears</option> </select>

CSS

css
div, 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; }

Ergebnis

Umschalten von Elementen mit einer versteckten Checkbox

Dieses Beispiel nutzt die :checked Pseudoklasse, um dem Benutzer zu erlauben, Inhalte basierend auf dem Zustand einer Checkbox umzuschalten, alles ohne JavaScript zu verwenden.

HTML

html
<input type="checkbox" id="expand-toggle" /> <table> <thead> <tr> <th>Column #1</th> <th>Column #2</th> <th>Column #3</th> </tr> </thead> <tbody> <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> </tbody> </table> <label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>

CSS

css
/* 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; }

Ergebnis

Spezifikationen

Specification
HTML
# selector-checked
Selectors Level 4
# checked-pseudo

Browser-Kompatibilität

Siehe auch