Skip to content

Style ALL the selects#152

Open
geoffrey-eisenbarth wants to merge 5 commits intobigskysoftware:devfrom
geoffrey-eisenbarth:dev
Open

Style ALL the selects#152
geoffrey-eisenbarth wants to merge 5 commits intobigskysoftware:devfrom
geoffrey-eisenbarth:dev

Conversation

@geoffrey-eisenbarth
Copy link
Collaborator

@geoffrey-eisenbarth geoffrey-eisenbarth commented Mar 2, 2026

This untangles the web of select[multiple][size] and appearance: base-select. Tested in Firefox and Chrome Canary, I'm pretty happy with it and would consider it appropriate to close #91 after this gets merged.

I think <select size|multiple> should be styled similar to the upcoming listbox component. To that end, one thing that I'm a little iffy on is what option:checked:not(:hover, :focus-visible) should look like. I copped the current styling from the old listbox impl, and it looks good when <select> is being used as a "native listbox." However, that style does (currently) bleed over to the dropdown picker (when appearance: base-select is supported, e.g. Chrome), and from what I can tell most UI impls of the dropdown picker have no styles on option:checked when it's not hovered/focused.

This also inherently fixes some bugs in 1.2.0:

  • <select multiple> had a fixed height of lineheight+padding, resulting in broken listbox
  • select option had border: inherit, which resulted in an ugly listbox.

Thoughts?

@geoffrey-eisenbarth geoffrey-eisenbarth requested a review from dz4k March 2, 2026 18:35
@geoffrey-eisenbarth
Copy link
Collaborator Author

This will also close #134

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Customizable <select> support

1 participant