Intent to Prototype: Base Appearance Form Controls

[Chromestatus]

Contact emails

lwa...@igalia.com, jar...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-forms-1

Summary

Base appearance form controls allow developers to take more complete control of the rendering of form controls. Developers can do this by adding the appearance:base CSS property to get an interopable base stylesheet, and use newly provided pseudo-elements to target specific control parts. Building on the work already done for customisable select this feature extends this customisation to the other in-page components of form controls.

Blink component

Blink>Forms

Web Feature ID

Missing feature

Motivation

User agents have long provided non-standard ways of styling form controls. However, all of these controls are implemented inconsistently across user agents, creating unnecessary friction for authors. CSS Forms aims to define a set of form control parts in enough detail that they can be used interoperably. It also defines some new ways of customising form controls, covering common use cases that were previously only possible by implementing custom controls from scratch, which was a lot of work, hard to get right, and often broke either accessibility or platform conventions.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/5998

Search tags

controls, form controls, custom controls, custom form controls, base appearance

TAG review

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal

WebKit: No signal

Web developers: Positive (https://2024.stateofhtml.com/en-US/features/forms/#forms_pain_points) Styling and customisation of form controls repeatedly comes up as developer pain points. This feature directly addresses that.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Is this feature fully tested by web-platform-tests?

No

Requires code in //chrome?

False

Tracking bug

https://crbug.com/450139531

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5104958101913600?gate=5830378212425728

This intent message was generated by Chrome Platform Status.