: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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked for Custom Checkboxes
The :checked hack: hide the native input, style a custom box using the adjacent sibling selector triggered by :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled and :enabled
:disabled selects form elements with the disabled attribute. :enabled selects elements that can be interacted with.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required and :optional
:required selects inputs with the required attribute. :optional selects inputs without it.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid and :invalid
:valid and :invalid reflect browser-native form validation state based on type, pattern, min/max, and required constraints.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
: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 type="email" value="not-an-email" required />
: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 type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only and :read-write
:read-only selects inputs with the readonly attribute. :read-write selects editable inputs.
<input type="text" value="Read-only field" readonly />
: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" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
: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" min="1" max="10" value="15" />
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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
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