Add UA stylesheet for <select> base appearance #10670

josepharhar · 2024-10-03T16:28:25Z

This PR adds a stylesheet for customizable select which applies when the select element has base appearance.

Discussion here: w3c/csswg-drafts#10857

Customizable select proposal: #9799

At least two implementers are interested (and none opposed):
- Chrome
- Mozilla: Customizable select element mozilla/standards-positions#1060
- WebKit: Customizable select element WebKit/standards-positions#386
Tests are written and can be reviewed and commented upon at:
- https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select/
Implementation bugs are filed:
- Chromium: Already implemented
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1944403
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=286642
MDN issue is filed: Customizable select element mdn/content#37857

(See WHATWG Working Mode: Changes for more details.)

/infrastructure.html ( diff )
/rendering.html ( diff )

Discussion here: w3c/csswg-drafts#10857

annevk · 2024-10-04T11:10:40Z

source

@@ -135710,6 +135711,93 @@ progress { appearance: auto; }</code></pre>

  </div>

+  <!-- TODO should this go at the top of the section right below "the select element"? -->
+  <p>The following styles are expected to apply to <code>select</code> elements when they are being
+  rendered as a <span>drop-down box</span> with <span>base appearance</span>:</p>


Where do we define what base computes to when it's a list box?

In this iteration I'm not proposing supporting base appearance on list box rendering. In chromium, I am making it do the same thing as appearance:auto, and our plan to do forward compat is to add a CSS @supports rule when appearance:base is ready for list box rendering.

source

annevk

@nt1m have you had a chance to review this?

source

josepharhar · 2025-02-27T19:28:04Z

I just updated this PR to match the latest styles from the CSS issue.

I'm not sure what we should say about properties that are supposed to be inherited, like color and font. Should we explicitly say color:inherit? Should we have some text which says that all properties not listed here should be whatever their unset value is? Should we just say that other UA styles should not apply?

There is a bunch of UA styles in chromium I have to undo by adding extra CSS, and while I don't want to list all those properties specifically in this spec I also think it would be a good idea to mention that when implementing this feature, you have to undo those.

domenic · 2025-02-28T01:24:58Z

I think we need to list all those properties explicitly in the spec! Why would we not?

annevk · 2025-02-28T07:53:41Z

I think @josepharhar is describing Chromium's implementation of "base appearance", as in principle "base appearance" would start from an unstyled element so you would not have to undo styling, unless it was some global style.

domenic · 2025-02-28T08:27:20Z

I see. That's probably covered by the CSS spec for appearance: base then?

josepharhar · 2025-02-28T14:56:06Z

Agreed! I'll omit the properties which have their default.

source

domfarolino

LGTM. I recommend we merge this in one week since I haven't seen any further objections, and I think it's ready to go.

source

This prevents authors from breaking accessibility

nt1m · 2025-04-08T16:19:21Z

source

+  min-block-size: max(24px, 1lh);
+  min-inline-size: 24px;


I think @dbaron had thoughts on better defaults for these so they can work better in flexbox/grid

so long as the minimum sizing doesn't fall below 24px height/width. these were specifically added so that the customizable select would meet the WCAG 2.2 minimum target size success criterion by default.

lukewarlow · 2025-04-08T20:44:23Z

source

+  text-transform: initial;
+  text-align: initial;
+  text-indent: initial;
+  background-color: transparent;


Chrome seems to set this to color-mix(in lab, currentColor 10%, transparent) in Forced colors mode. Should that be copied to this PR or should chrome actually just be keeping this as transparent?

Chrome also seems to set different values in forced colors mode for a few other properties too.

Such as the selects border both normally and on hover.

The hover background change for the options is also lost in forced colors mode too?

I think it would be good to define how all this is expected to work to ensure we're interopable in that mode too.

w3c/csswg-drafts#12085

…id context. This makes the change proposed in w3c/csswg-drafts#12085 whatwg/html#10670 has been updated with this change. Change-Id: I046d73477e15ce6342f2c00193f8131d025c8e2f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6462875 Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1448995}

…select work better in flex/grid context., a=testonly Automatic update from web-platform-tests Make default min sizes for customizable select work better in flex/grid context. This makes the change proposed in w3c/csswg-drafts#12085 whatwg/html#10670 has been updated with this change. Change-Id: I046d73477e15ce6342f2c00193f8131d025c8e2f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6462875 Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1448995} -- wpt-commits: 0eb7694e58ce18fa3a1b130e4fe3fe65f2b3627c wpt-pr: 52064

Add UA stylesheet for <select> base appearance

7a93a56

Discussion here: w3c/csswg-drafts#10857

josepharhar mentioned this pull request Oct 3, 2024

Customizable <select> element #9799

Open

domenic added addition/proposal New features or enhancements topic: rendering topic: forms labels Oct 3, 2024

annevk reviewed Oct 4, 2024

View reviewed changes

annevk added the topic: select The <select> element label Nov 8, 2024

josepharhar mentioned this pull request Nov 11, 2024

Define base appearance for <select> #10629

Open

5 tasks

smaug---- reviewed Dec 19, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

josepharhar added 4 commits December 26, 2024 10:48

Merge branch 'main' into selectcss

9991736

update styles to latest resolution

c6d7d21

add user-select:none

ba2d0df

place-items -> align-items

56a216c

annevk reviewed Jan 16, 2025

View reviewed changes

source Outdated Show resolved Hide resolved

remove comment

97af7cd

captainbrosset mentioned this pull request Jan 30, 2025

Early customizable select feature web-platform-dx/web-features#2301

Merged

annevk reviewed Feb 27, 2025

View reviewed changes

source Outdated Show resolved Hide resolved

josepharhar added 3 commits February 27, 2025 09:04

Merge branch 'main' into selectcss

ac87396

remove extra newlines

9c53509

update styles

d61e87d

remove inherited property

39cc516

lukewarlow reviewed Mar 9, 2025

View reviewed changes

source Outdated Show resolved Hide resolved

add field-sizing

4e758e2

domfarolino approved these changes Mar 20, 2025

View reviewed changes

source Outdated Show resolved Hide resolved

remove extra newline

0ea2648

add !important to interactivity

650ca4e

This prevents authors from breaking accessibility

This was referenced Apr 7, 2025

Remove support of field-sizing from <select> #11194

Open

Update spec to reflect <select> no longer being an element with default preferred size w3c/csswg-drafts#12055

Open

nt1m reviewed Apr 8, 2025

View reviewed changes

Merge branch 'main' into selectcss

b10cd35

lukewarlow reviewed Apr 8, 2025

View reviewed changes

Use calc-size() in min sizes

e81a863

w3c/csswg-drafts#12085

chromium-wpt-export-bot mentioned this pull request Apr 18, 2025

Make default min sizes for customizable select work better in flex/grid context. web-platform-tests/wpt#52064

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add UA stylesheet for <select> base appearance #10670

Add UA stylesheet for <select> base appearance #10670

josepharhar commented Oct 3, 2024 •

edited by pr-preview bot

Loading

annevk Oct 4, 2024

josepharhar Oct 4, 2024

annevk left a comment

josepharhar commented Feb 27, 2025

domenic commented Feb 28, 2025

annevk commented Feb 28, 2025

domenic commented Feb 28, 2025

josepharhar commented Feb 28, 2025

domfarolino left a comment

nt1m Apr 8, 2025 •

edited

Loading

scottaohara Apr 8, 2025 •

edited

Loading

lukewarlow Apr 8, 2025

lukewarlow Apr 8, 2025

Add UA stylesheet for <select> base appearance #10670

Are you sure you want to change the base?

Add UA stylesheet for <select> base appearance #10670

Conversation

josepharhar commented Oct 3, 2024 • edited by pr-preview bot Loading

annevk Oct 4, 2024

Choose a reason for hiding this comment

josepharhar Oct 4, 2024

Choose a reason for hiding this comment

annevk left a comment

Choose a reason for hiding this comment

josepharhar commented Feb 27, 2025

domenic commented Feb 28, 2025

annevk commented Feb 28, 2025

domenic commented Feb 28, 2025

josepharhar commented Feb 28, 2025

domfarolino left a comment

Choose a reason for hiding this comment

nt1m Apr 8, 2025 • edited Loading

Choose a reason for hiding this comment

scottaohara Apr 8, 2025 • edited Loading

Choose a reason for hiding this comment

lukewarlow Apr 8, 2025

Choose a reason for hiding this comment

lukewarlow Apr 8, 2025

Choose a reason for hiding this comment

josepharhar commented Oct 3, 2024 •

edited by pr-preview bot

Loading

nt1m Apr 8, 2025 •

edited

Loading

scottaohara Apr 8, 2025 •

edited

Loading