:checked :disabled and Form State Pseudos
Style form elements based on their interactive states like checked, disabled, and required.
:checked :disabled and Form State Pseudos is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Form State Pseudo-classes Overview
CSS provides pseudo-classes that reflect HTML form element states. These enable pure-CSS styled form controls without JavaScript.
:checked
:checked applies to checkboxes and radio buttons when they are selected, and to <option> elements within selects when chosen.
input[type="checkbox"]:checked + label {
color: royalblue;
font-weight: bold;
}:checked for Custom Checkboxes
The :checked hack: hide the native input, style a custom box using the adjacent sibling selector triggered by :checked:
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
input:checked + .checkbox-box {
background: royalblue;
}
.checkbox-box {
width: 20px;
height: 20px;
border: 2px solid #ccc;
}:disabled and :enabled
:disabled selects form elements with the disabled attribute. :enabled selects elements that can be interacted with.
input:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #f0f0f0;
}
button:enabled {
cursor: pointer;
}:required and :optional
:required selects inputs with the required attribute. :optional selects inputs without it.
input:required {
border-left: 3px solid red;
}
input:optional {
border-left: 3px solid #ccc;
}:valid and :invalid
:valid and :invalid reflect browser-native form validation state based on type, pattern, min/max, and required constraints.
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}:user-valid and :user-invalid
Browser validation runs immediately on page load even before user interaction. :user-valid and :user-invalid only apply after the user has interacted with the field — much better UX.
input:user-invalid {
border-color: red;
outline: 2px solid rgba(255,0,0,0.3);
}:placeholder-shown
:placeholder-shown applies when an input is displaying its placeholder text — meaning the field is currently empty. Use it to detect empty inputs without JavaScript.
.input-label {
/* label floats up when input has value */
}
input:placeholder-shown + .input-label {
transform: translateY(0); /* label inside field when empty */
}:read-only and :read-write
:read-only selects inputs with the readonly attribute. :read-write selects editable inputs.
input:read-only {
background: #f8f8f8;
color: #666;
}:indeterminate
:indeterminate applies to checkboxes in an intermediate state (neither checked nor unchecked — set via JavaScript), and to radio buttons when no selection in the group has been made.
input[type="checkbox"]:indeterminate {
/* show dash or minus icon */
background: royalblue url("minus.svg") center no-repeat;
}:in-range and :out-of-range
For type="number" or type="range" inputs with min/max, :in-range and :out-of-range reflect the current value's validity relative to those bounds.
input[type="number"]:out-of-range {
border-color: red;
}Quick Check
Which pseudo-class applies form validation styles only after the user has interacted with an input field?
Recap
CSS form state pseudo-classes reflect native form validation and interaction state without JavaScript: :checked, :disabled, :required, :valid, :invalid, and more. Prefer :user-invalid over :invalid for better UX. Use :placeholder-shown to detect empty fields.
Frequently asked questions
Is the “:checked :disabled and Form State Pseudos” lesson free?
Yes — the full text of “:checked :disabled and Form State Pseudos” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “:checked :disabled and Form State Pseudos”?
Style form elements based on their interactive states like checked, disabled, and required. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “:checked :disabled and Form State Pseudos” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- :hover :focus :active and :visited
- :nth-child and :nth-of-type
- :not() :is() and :where()
- :checked :disabled and Form State Pseudos