CSS Form Control Styling Module Level 1
CSS Form Control Styling Module Level 1
Editor’s Draft
8 April 2026
More details about this document
This version:
Latest published version:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Tim Nguyen
Apple Inc.
Luke Warlow
Igalia
Suggest an Edit for this Spec:
GitHub Editor
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This CSS Module defines various ways of styling form controls and their different parts.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-forms” in the title, like this:
“[css-forms]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
1.
Introduction
This section is non-normative.
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.
This module 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 customizing 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.
2.
Opting Into
Basic Appearance
: the
appearance: base
value
Move definition of
appearance
here.
Name:
appearance
New values:
base
When applied on a form control,
base
puts that control in the
basic appearance
state.
A control that has
basic appearance
is consistently styleable using standard CSS and the pseudo-elements defined below, and applies overridable default styles that are consistent across UAs.
When a control is in that state, the user agent applies styles from the
Appendix A: Basic Appearance User Agent Stylesheet
to that control.
The user agent must also enable the pseudo-elements defined by
§ 4 Pseudo-Elements
. These pseudo-elements (excluding
::picker()
) always
inherit
appearance
from their
originating element
. The user agent may implement this using an
appearance: inherit !important
declaration.
NOTE:
The inheritance prevents authors from mixing native and non-native parts for the same control.
2.1.
Design Principles for the
Basic Appearance
The following design principles apply to the design of the
basic appearance
stylesheet for form controls,
in approximate order of descending importance:
The styles are identical in every user agent.
The controls are recognizable and usable on their own without additional styles.
The controls target accessiblity out of the box, ideally passing
WCAG 2.2 AA standards
NOTE:
Authors may need to do extra adjustments to ensure their controls are accessible depending on any customizations as well as the context the form control is placed into.
The basic appearance does not prevent adjustments by the author that are inaccessible.
The styles are consistent across controls…
…in look & feel.
…in how they are defined in code.
…in sizing and interaction.
The styles are easily adapted to the website’s branding, without needing complex reset stylesheets:
They use minimal code and are easy to override.
They do not have a strong voice & tone of their own, and are visually as simple as possible.
They inherit page styles rather than define new styles whenever possible.
They are resilient to adjustments…
…when changed themselves (e.g. changing font, border, layout).
…when put in context (e.g. ready to be flex or grid children).
They are comprehensive:
Covering all states for each control.
Supporting all writing modes and color schemes.
For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in
Appendix A: Basic Appearance User Agent Stylesheet
2.2.
Examples
Refine these examples through implementation, experimentation, bikeshedding and improvements to the user agent stylesheet.
The main purpose of these examples is to show how the design principles for the
basic appearance
apply in practice.
To apply the
basic appearance
on individual controls, the following code is used:
input
textarea
meter
progress
button
select
fieldset
legend
appearance
base
NOTE:
The form layout used by the following examples is not detailed.
2.2.1.
Default User Agent Colors
Here are the
basic appearance
colors inheriting respectively the default light and dark mode colors from the root element:
2.2.2.
Color/Font Customization
Here are some examples of customization being done on top of the
basic appearance
form
font-family
"American Typewriter"
background-color
rgb
254
252
221
);
color
rgb
131
17
);
input
textarea
meter
progress
button
select
fieldset
legend
appearance
base
form
font-family
"Courier New"
font-size
14
px
background-color
rgb
);
color
rgb
249
);
input
textarea
meter
progress
button
select
fieldset
legend
appearance
base
3.
Styling Pickers
3.1.
The
::picker()
pseudo-element
The
::picker()
pseudo-element represents the part of the form control that pops out of the page.
::picker() = ::picker(
= select
The
::picker()
pseudo-element only matches when the
originating element
supports
basic appearance
and has a popup picker. The
specified
must also match the
unique picker name
of the
originating element
. For example, the
unique picker name
for
the
select
element is
select
In order for the
::picker()
pseudo-element to be rendered, it and its
originating element
must both have a
computed
appearance
of
base
The following styles apply the
basic appearance
to the select picker and the select and add some additional styling to the picker:
select
select::picker
select
appearance
base
select::picker
select
border
px
solid red
background-color
blue
NOTE:
The non-functional form of
::picker()
currently doesn’t work to prevent unintended styling of pickers as new pickers become supported.
Once styling for all form control pickers is finalized, this non-functional form will work for all pickers.
4.
Pseudo-Elements
Form controls are composed of many parts that authors may want to style separately,
hence the need for user agents to provide pseudo-elements for individual form controls.
The section below introduces a set of pseudo-elements that attempts to cover the most common use cases,
so they can be addressed in a consistent manner across user agents.
Informative overview of form control pseudo-elements as applied to HTML
Control
Pseudo-elements
US