About
checked is an HTML attribute that indicates via its value (true or false - default to true) if the form control element is checked.
Usage
It's used:
- in a checkbox
<input type="checkbox" name="indicator" checked/>
- or radio button
<input type="radio" name="choice" value="regular" >
<input type="radio" name="choice" value="deep" checked >
That in a select select option, the same functional attribute is called selected
<select>
<option value="blue">Blue</option>
<option selected value="green">Green</option>
</select>
Css
The checked state is also available in css via the pseudo class :checked (available also for the selected option of a select element)
<input type="checkbox" name="indicator" checked/>
- first disable the browser rendering
:checked {
appearance: none;
}
- Then make you own
:checked {
width: 2rem;
height: 2rem;
border-radius: .5em;
border: 1px solid rgba(0,0,0,.25);
background-color: #20c997;
border-color: #20c997;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3e%3c/svg%3e");
}