Controls
This page exercises document/blocks/controls.css — every form element the profile
dresses, walked in the order the stylesheet declares them. Hover, press, tab and toggle: the states
below are real CSS states, not pictures of them.
Nothing here carries a class. A <button> is a button, and this is the one place
the identity is allowed to be presumptuous, because a form control is the element whose appearance
is the whole point. Asking an author to write class="win32-button" would be the
stylesheet declining to commit.
Buttons
Minimum 75 by 23 pixels, unchanged since the Windows 3.1 Interface Guidelines specified 50 by 14 dialog units. The default button takes a ring rather than a fill, because Enter presses it and the user needs to see which one that is before pressing.
[data-default] and [aria-pressed] are attributes, not classes, because
both are states the markup already has a way to say. A class would be a second vocabulary for a
thing HTML can express on its own.
Text fields
The editable well. Its top edge is drawn darker than the other three, because light falls from
above and the inside of a recess is shadowed at the top. A one-pixel lie, in every Windows text
box since 1995, and the reason --color-field-border-top is a role of its own.
Select
Themed closed and native open. The popup list belongs to the operating system, and no stylesheet reaches it — which is honest rather than a limitation: that list is the OS, and on this site it is the only part of the chrome that is not a reconstruction.
Checkbox and radio
Both are 13 or 14 pixels depending on the era, which is small enough that the border colour
decides whether they are visible at all. Classic sets the control border to
transparent and lets the bevel carry the edge, so these take
--color-field-border instead: they are wells you tick, not faces you press.
Range
The seek bar. Track and thumb are separate roles: the groove is a trough
(--surface-well-block) and the thumb is a control, so the thumb changes material
with the era while the groove changes only its fill.
Worth knowing if you read the CSS: the track selectors are written out one per line rather than
grouped. A single unrecognised vendor pseudo-element invalidates an entire selector list, so
grouping ::-webkit-slider-runnable-track with ::-moz-range-track makes
both disappear. Splitting them is not fussiness, it is the only thing that works.
Fieldset
The group box, and the last survivor of the Windows dialog that the web kept a tag for. The legend sits in the border rather than above it, which is a browser default worth leaving alone because it is also what Windows did.