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.
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 AndroidFirefox 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 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0


Full support  
Full support