Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style the select element options list #99

Open
amclain opened this issue Aug 3, 2020 · 0 comments
Open

Style the select element options list #99

amclain opened this issue Aug 3, 2020 · 0 comments
Labels
refactor Refactoring code or tech debt repayment

Comments

@amclain
Copy link
Member

amclain commented Aug 3, 2020

We would like to restyle the options list for the select element away from the browser default and to a style that matches the Xebow look and feel. Tailwind claims this requires a considerable amount of JavaScript, so waiting for their library seems reasonable unless someone feels passionate about writing this custom code.

Custom select controls like this require a considerable amount of JS to implement from scratch. We're planning to build some low-level libraries to make this easier with popular frameworks like React, Vue, and even Alpine.js in the near future, but in the mean time we recommend these reference guides when building your implementation:

https://www.w3.org/TR/wai-aria-practices/#Listbox
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

link

Design

Figma

image

@amclain amclain added the refactor Refactoring code or tech debt repayment label Aug 3, 2020
@amclain amclain mentioned this issue Aug 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
refactor Refactoring code or tech debt repayment
Projects
None yet
Development

No branches or pull requests

1 participant