CSS Form Styling Module Level 1

1. Pseudo-Elements

This section defines some pseudo-elements for styling parts of form elements.

1.1. Styling form control pickers: the ::picker() pseudo-element

The ::picker() pseudo-element targets the popup picker of form control elements which have popup pickers, such as the select element. It is an element-backed pseudo-element.

::picker() = ::picker( <ident>+ )

Note: Once all of the controls that might support picker styling have it, then we might add a (no-argument) ::picker pseudo-element as well.

The ::picker() pseudo-element only matches when the originating element supports base appearance and has a popup picker. The specified <ident> must also match the unique picker name of the originating element. For example, the unique picker name for the select element is "select".

Since it is an element-backed pseudo-element, There is no restriction on which properties apply to the ::picker() pseudo-element.

In order for the ::picker() pseudo-element to be rendered, it and its originating element must be rendered with base appearance by applying appearance: base to both of them.

<style>
  select, select::picker(select) {
    appearance: base;
  }
  select::picker(select) {
    border: 5px solid red;
    background-color: blue;
  }
</style>

1.2. Picker opener icon: the ::picker-icon pseudo-element

The ::picker-icon pseudo-element is only generated when the originating element has base appearance and opens a picker.

::picker-icon is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element.

::picker-icon generates a box as if it was an child of its originating element, after any boxes generated by the ::after pseudo-element, with content as specified by content.

1.3. Checkmark icon: the ::checkmark pseudo-element

The '::checkmark'' pseudo-element is only generated when the originating element supports the :checked pseudo-class and either has base appearance or an ancestor with base appearance.

::checkmark is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element.

::checkmark generates a box as if it was an child of its originating element, preceding any boxes generated by the ::before pseudo-element, with content as specified by content.

1.4. Styling parts of slider-like controls: the ::slider-thumb, ::slider-track, ::slider-fill and ::slider-options-track pseudo-elements

Slider-like controls are form controls that represent progress. That progress may be adjustable by the user.

The list of slider-like controls depends on the host language. For HTML, this corresponds to:

• <progress>

• <meter>

• <input> elements with `type="range"`

• <input> elements with `type="checkbox" switch`

The following pseudo-elements are provided to style their different parts:

::slider-thumb

The ::slider-thumb pseudo-element represents the portion that allows the user to adjust the progress of the control.

That portion may be omitted for controls where the progress is not adjustable. Disabled controls should provide this portion if the enabled state allows adjusting the progress.

NOTE: It is typically natively rendered as a circle in most user agents.

::slider-track

The ::slider-track pseudo-element represents the portion containing both the progressed and unprogressed portions of the control.

::slider-fill

The ::slider-fill pseudo-element represents the portion containing the progressed portion of the control.

When the progress of control is undetermined (like with <progress indeterminate>), the user agent is expected to give this portion an inline-size of zero.

::slider-options-track

The ::slider-options-track pseudo-element represents the portion containing the options. It is expected to render at the same width as ::slider-track and underneath it in the block direction.

With `appearance: auto`, the user agent may draw tickmarks corresponding to the options given by the associated `

These pseudo-elements are tree-abiding pseudo-elements and their structure is expected to be the following:

<input type="range">
├─ ::slider-track
│  └─ ::slider-fill
├─ ::slider-thumb
└─ ::slider-options-track

Appendix: Explorations

Basic Styling Proposals

This section sketches a few proposals for solving the form styling problem.

Prototypes

This idea, originally suggested by fantasai, is that we can style a handful of "prototype" elements. Browser UI designers can then take the styling of those elements and extrapolate the design into their own UIs. At minimum, things like text, backgrounds, and borders can be used. At the limit, things like internal padding, border-radius, etc might be used.

@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.

Inverse System Colors

This idea, originally sketched by Florian and Tab, is to define an abstract set of colors that UI designers can then choose from when coloring their UI.

Tab’s suggested set of colors, from an Android color-extraction API proposal:

• Light/Normal/Dark Vibrant

• Light/Normal/Dark Muted

• Vibrant Complementary (for call-out buttons and such that need to be visually distinct)

(where light ~75% lightness, normal is ~50%, dark is ~25%; vibrant is at least 30% saturation, ideally 100%, and muted is at most 40% saturation, ideally 30%)

• Light/Dark Contrasting Text

• Light/Dark Contrasting Secondary Text

That’s 11 colors, many of which should be drawable from the webpage’s own color scheme. We can auto-gen a bunch of them if you specify at least some of them, like genning the light/dark variants from the "normal-vibrant" color, or automatically setting text colors to white/black as appropriate.

There’s no guarantee that the input UIs will use the colors in the *same way* that the rest of the page does, though.

Miscellaneous Control-Specific Suggestions

<progress> and <meter> styling

Insert <select> and <datalist> styling proposal and/or whiteboard photo.

Select/Datalist Dropdown

1. Only allow styling if both color and background are set.

2. Option container:

   • backgrounds

   • borders

   • padding

3. option

   • padding

   • borders

   • border-collapse?

   • backgrounds

   • display-inside is allowed, automatically blockified

   • not margins, position, float, width, height

   All options are contain:paint and BFCs.

Input UI Examples

This section catalogues as many input UI examples as we can screenshot, especially on mobile devices where they’re a bit "weirder".

Time Pickers

Date Pickers