A check box is a form control that a person can select or clear independently. In a contact form, it can offer a choice such as “Subscribe to our newsletter.” Its native square is useful, but it can be difficult to fit into a custom design because much of its appearance comes from the operating system. section 10.3 section 10.3.3
For a quick color change, target `input[type="checkbox"]` and set `accent-color: var(--accent)`. The control keeps its native appearance while using the chosen accent color. Changing the form’s font size, however, does not make the check box grow with the text. section 10.3.3
For more control over its size and shape, keep the HTML input but replace its native visuals with `appearance: none`. Set a background and remove the default margin, then give the control `width` and `height` of `1.75em`, a `1px solid currentcolor` border, and a `4px` border radius. The shared radio-button styles use `inline-grid` and `place-content: center`; the check box remains square-cornered rather than circular. These declarations style the unselected control—the supplied example does not show a custom selected-state design. section 10.3.3
Listing 10.9 Styled radio and checkbox inputs
input[type="radio"],
input[type="checkbox"] {
appearance: none;
background-color: var(--background);
margin: 0;
width: 1.75em;
height: 1.75em;
border: 1px solid currentcolor; #1
display: inline-grid; #2
place-content: center; #2
}
input[type="radio"] { border-radius: 50% }
input[type="checkbox"] { border-radius: 4px }
Compare the shared radio-button and check-box rules with their separate border-radius declarations. section 10.3.3
