Title: CSS Form Styling Module Level 1
Shortname: css-forms
Level: 1
Status: DREAM
Work Status: Exploring
ED: https://drafts.csswg.org/css-forms/
No Editor: true
Abstract: This document is currently a loosely-structured set of ideas and inspiration for CSS form styling.
	It is not an implementable standard. Do not look at this as anything but a collection of ideas.
Warning: not ready

	@control button {
		<declaration-list>
	}

	@control input {
		<declaration-list>
	}

	input::selection {
		<declaration-list>
	}

	...

You would be able to use styles for: * font selection (css-fonts) * text decoration (css-text-decor) * text layout (css-text) * backgrounds & drop-shadow (css-backgrounds) * borders & padding (css-backgrounds) * filters * anything else we or a UA decides seems relevant Most form controls, even a calendar widget or clock, are a combination of these three primitives in some way. If the UA is given the styling for these three primitives, and perhaps one or two more it can figure out how to style the rest. For example, a calendar widget might have the month, the year, some buttons to move them around, the ability to click into them and edit them directly, and a representation of the days of the month. The selected day is selected. Perhaps the buttons only show up on :hover or :focus -- the UA decides. But it knows that a button should be this particular shade of blue with that particular border-radius and drop-shadow. The calendar might be shown in the colors of the input field, and the selected day in the selection color, and in all ways it will match the way the input fields look in the rest of the page. Now, the author can't decide, for example, the spacing between the year and the month name, or whether the button to change years has a solid arrow or a hollow arrow or a frilly one, and she can't decide that there should be a black solid half-border between the month and the day field below it with 5px spacing. But the calendar will look like it belongs to the page, and the UA can come up with a different calendar layout when it ships one on a wide but short smart watch where the month and year are better placed on the side without breaking anything.

The black area is the button color; a very light transparency of it can be the glass color. The rollers are the input colors.

It's hard to tell without more context, but for the one on the right, the clock face and the digital readout are @input colors, the highlighted bits are the highlight color, the Done button is the button styling, and the shaded area around the clock face is the same color as the button background.