HTML - Checked

Table of Contents

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:

<input type="checkbox"  name="indicator" checked/>
<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");
}

Powered by ComboStrap