Browsers and operating systems give controls such as progress bars, radio buttons, and check boxes their own visual styles. Set `appearance: none` when those native styles prevent the design you want. The control remains in the HTML; you replace its visual styling with CSS. section 3.6.1 section 10.3.3
Make a progress bar ready for custom styling
A progress bar can resist a `background-color` change while its default appearance is active. Reset it first: `progress { height: 24px; width: 100%; border-radius: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }` The reset may initially look like a broken bar, but it allows further styling. Once you are creating its styles from scratch, `accent-color` no longer has an effect. section 3.6.1
For radio buttons and check boxes, try `accent-color` if changing the native control’s color is enough. If the control must scale with the font size or needs more customization, use `appearance: none` and supply its background, dimensions, border, and shape yourself. Keep the existing HTML so the control retains its functionality. 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 CSS rule shows the next step after the reset: shared `1.75em` dimensions and borders, with a round radio button and a slightly rounded check box. section 10.3.3
A reset is a starting point, not a complete custom control. Further progress-bar styling can require nonstandard, vendor-prefixed properties; experimental implementations may change. section 3.7
