A radio button lets someone choose one option from a group of mutually exclusive choices. In a contact form, a Yes/No question is a practical place to use one. Its native appearance differs from a text field, so it needs a different styling approach. section 10.3
For a quick color change, keep the native control and set `accent-color: var(--accent)` on `input[type="radio"]`. This changes its default color, but the control does not grow when the form’s font size increases. section 10.3.3
For a larger, more customizable control, keep the HTML input but replace its visual styling. Set `appearance: none` to remove the operating system’s appearance, then provide a background, border, and dimensions in `em` units. The input remains the control; only its appearance changes. 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 }
The radio and check box share a reset and a 1.75em outer size. `border-radius: 50%` makes the radio button round, while the check box receives different corners. section 10.3.3
The radio input’s `::before` element gets a 50% border radius, turning its inner shape into a disk for hover and checked states. section 10.3.7
