Web/CSS/ checked-2

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.

Syntax

:checked

Examples

Basic example

HTML

<div>
  <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>
</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

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;
}

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.

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

/* 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.

Specifications

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
:checked	Chrome Full support 1 Notes' Full support 1 Notes' Notes' On macOS, styling <option&rt; elements has no effect.	Edge Full support 12 Notes' Full support 12 Notes' Notes' On macOS, styling <option&rt; elements has no effect.	Firefox Full support 1 Notes' Full support 1 Notes' Notes' From Firefox 56, <option&rt; elements cannot be styled. Notes' On macOS, styling <option&rt; elements has no effect.	IE Full support 9	Opera Full support 9 Notes' Full support 9 Notes' Notes' On macOS, styling <option&rt; elements has no effect.	Safari Full support 3.1 Notes' Full support 3.1 Notes' Notes' Styling <option&rt; elements has no effect.	WebView Android Full support 2	Chrome Android Full support 18	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' From Firefox 56, <option&rt; elements cannot be styled.	Opera Android Full support 10.1	Safari iOS Full support 3.1 Notes' Full support 3.1 Notes' Notes' Styling <option&rt; elements has no effect.	Samsung Internet Android Full support 1.0

Legend

Full support  

Full support

See implementation notes.'

See implementation notes.

See also

• Web forms — working with user data
• Styling web forms
• Related HTML elements: <input type="checkbox">, <input type="radio">, <select>, and <option>
• Replaced elements

:checked by Mozilla Contributors is licensed under CC-BY-SA 2.5.