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"); }