:checked and :disabled
Form pseudo-classes let you style inputs based on their state without JavaScript. :checked targets checked checkboxes/radios; :disabled targets disabled inputs.
CSS
Intermediate
5 min read
:checked and :disabled Pseudo-Classes
Example
/* Custom checkbox style */
input[type="checkbox"]:checked + label {
color: #28a745;
font-weight: bold;
}
/* Disabled input styling */
input:disabled {
background: #e9ecef;
color: #6c757d;
cursor: not-allowed;
}
/* Valid/invalid states */
input:valid { border-color: #28a745; }
input:invalid { border-color: #dc3545; } Pro Tip
The adjacent sibling selector (+) after :checked is powerful for building custom toggles and accordions without JS.