To apply CSS to an input with type=’checkbox’, you can use the [attribute=”value”] selector. In case of the input type checkbox, the attribute will be type and the value will be “checkbox”.
Let’s say we have the following checkbox element in our HTML file:
Accept Cookies: <input type='checkbox' value='cookies'>
Now, to select this checkbox, you have to use input[type="checkbox"] selector.
Something like this:
input[type='checkbox']{
box-shadow: 1px 2px 5px red;
width: 20px;
height: 20px;
}
You can also select only the checked checkboxes by combining the input[type="checkbox"] selector with the :checked pseudo-class:
/*Select only checked checkboxes*/
input[type='checkbox']:checked{
box-shadow: 1px 2px 5px red;
width: 20px;
height: 20px;
}
Thanks for reading.
