Checked CSS Selector
FREE
How to Use the CSS Checked Selector?
The :checked CSS pseudo-class selector is used to select or deselect an already selected element for styling them.
We can use it with the help of checkbox element(<input type="checkbox">),option element (<option> in a <select>) and radio element(<input type="radio">).
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
Syntax
The general syntax is as follows
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Examples
Example 1: Basic Example of CSS :checked
In this example we will be applying :checked CSS pseudo-class selector to style a checkbox element(<input type=“checkbox”>), option element (<option> in a <select>) and radio element(<input type="radio">).
Output
Turn Learning into Career Growth
Example 2: Toggling Elements with a Hidden Checkbox
In this example, we will be using a hidden checkbox that can be used to toggle an element.
We can use the hidden property to hide the checkbox, and with the help of the <label>, we can control the toggle functionality.
Then we can use the adjacent sibling combinator to style the differently based on the
Output
When checkbox is checked and we click on the toggle button.
When checkbox is checked and we click on the Toggle button.
Note: By default the checkbox is unchecked in the above code snippet.
Explicit Styling Unchecked Elements
We can combine the :not pseudo-class with
For example, in the code snippet, we have used the explicit style to unchecked elements and gave them a red color.
Output
Browser Support
The following browsers fully supports the CSS
Conclusion
- :checked is a pseudo-class selector that’s used to style the checked state of radio, checkbox, or option elements.
- We can hide the checkbox and can still toggle its value on and off by clicking the
- the :not pseudo-class with :checked can be used to explicitly style unchecked elements.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more