CSS - :checked

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. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

Syntax  

CSS
input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

Formal syntax

CSS
:checked <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a> <var>style properties</var> <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a>

Description  

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. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.0) 9.0 9.5 3.1

 

Specifications  

Specification Status Comment
WHATWG HTML Living Standard
The definition of ':checked' in that specification.		 Living Standard No change.
HTML5
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.		 Candidate 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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:checked

CSS CSS Pseudo-class Layout Reference Web