Controls

Every form element the document can hold, walked in the order a stylesheet would meet them. Nothing here carries a class: a <button> is a button, because a form control is the one element whose appearance is the whole point of it.

This page is a specimen and, at the moment, an indictment. resets/forms.css strips every control back to nothing — appearance: none, no border, no background, no padding — and no consumer puts anything back. The reset is half a duty performed. What you see below is the floor, not the finish, and the gap is the point of showing it.

See package versus presentation: the profile can hold the vocabulary a control needs without deciding how one looks, but somebody has to decide, and right now nobody has.

Buttons

Four elements that mean "press me", three of them input in disguise. They should be indistinguishable; after the reset they are, because they are all nothing.

The disabled one is the only state the reset does dress: opacity: 0.5 and cursor: not-allowed. A reset making an aesthetic decision is worth noticing.

Text entry

The editable well. A field is not a surface: a surface is what a control is made of, a field is what you type into, and the profile has roles for neither yet.

Text Email Search Number Textarea Disabled

::placeholder is set to currentColor at full opacity, which makes placeholder text identical to entered text. That is a legibility problem, not a style choice: the reader cannot tell what they have typed from what they have not.

Choice

Checkboxes and radios keep their native appearance, because appearance: none on a checkbox with nothing drawn in its place removes the control entirely rather than restyling it.

Checkboxes

Checked Unchecked Disabled

Radios

First Second

fieldset and legend are reset to nothing as well, so the grouping above is announced to a screen reader and invisible to everyone else. The semantics survive the reset; the presentation does not.

Select

The one control the reset cannot fully strip. appearance: none removes the arrow, but the popup list stays native and unstyleable, which is the standing argument for leaving a select alone until you have something better to draw.

Focus

Tab through this page. The focus ring is the one part of a control the profile does dress, and it is the reason the page is operable at all while the rest is missing — every control above can be reached and used by keyboard even where nothing is drawn.

That is the accessibility floor doing its job, and it is also the clearest argument for finishing the layer: a control that works and cannot be seen is only half a control.