Skip to content

Conversation

@josepharhar
Copy link
Contributor

@josepharhar josepharhar commented Oct 17, 2025

This PR fixes some duplication and conflicts between UA styles for select elements:

  • display:inline-block was declared unconditionally for select elements but display:inline-flex is used for base appearance, so I created a separate section for native/primitive appearance and put display:inline-block in there to disambiguate the base appearance value.
  • The form-controls section has a block of CSS which sets some text properties to initial and sets box-sizing:border-box for select elements, so I removed the duplicate values for those from the base appearance select section.
  • Inherit letter-spacing for base appearance, which was resolved in CSSWG and implemented in chromium but not added to this spec.

Fixes #11804

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


/rendering.html ( diff )

This PR fixes some duplication and conflicts between UA styles for
select elements:
- display:inline-block was declared unconditionally for select elements
  but display:inline-flex is used for base appearance, so I created a
  separate section for native/primitive appearance and put
  display:inline-block in there to disambiguate the base appearance
  value.
- The form-controls section has a block of CSS which sets some text
  properties to initial and sets box-sizing:border-box for select
  elements, so I removed the duplicate values for those from the base
  appearance select section.
- Inherit letter-spacing for base appearance, which was resolved in
  CSSWG and implemented in chromium but not added to this spec.

Fixes whatwg#11804
text-transform: initial;
text-align: initial;
text-indent: initial;
letter-spacing: inherit;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's not already can you make a PR to add this to CSS forms spec?

If you link to the CSS resolution on the PR I can just go ahead and merge it. I'm guessing this is intended to apply to all button-like controls?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The other properties (word-spacing, line-height, text-transform, text-indent, text-shadow) are also different between native/primitive and base in Chromium.

I would prefer these properties to be set only in the "native/primitive" sheet instead of being set to initial and then back to inherit (for base). I think it's not defined that the spec order of these separate sheets are of any importance, but if there are conflicting rules then the order is important.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's not already can you make a PR to add this to CSS forms spec?

I just took a look and I think that css-forms is up to date. Is there something you think is missing? It seems that inherited properties are implied: https://github.com/w3c/csswg-drafts/pull/12138/files

The other properties (word-spacing, line-height, text-transform, text-indent, text-shadow) are also different between native/primitive and base in Chromium.

I see, then https://html.spec.whatwg.org/#form-controls is not accurate since it implies that both auto and base set all those properties to initial. I separated out and hopefully disambiguated, how does it look?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

Issues with UA styles for select with base appearance

3 participants