How to style a checkbox using CSS?
A checkbox is an HTML element that takes input from the user. It is possible to style a checkbox using Pseudo Elements like :before, :after, hover and :checked. To style the checkbox the user first needs to hide the default checkbox which can be done by setting the value of the visibility property to hidden.
Example 1: Consider the example where HTML checkbox is styled using CSS. When the user clicks the checkbox, the background color is set to green.
- “~” is the sibling combinator which selects all the elements which are preceded by the former selector.
- “:hover” is used to style the checkbox when user hovers over it. Notice that when the mouse pointer move over the checkbox the color of it changes to yellow.
- “:active” is used to style the checkbox when it is active. Notice that when click the checkbox it will first notice a red color and then the green color.
Example 2: Consider another example with a bit modified design of check-mark.