Potential Integration of Customizable select Element Specification in DaisyUI

[BakirGracic]

A new browser specification for customizable select elements is under development, currently outlined in the Chrome Developers RFC and Open UI's Specification Draft This proposal introduces native HTML/CSS capabilities for styling select elements beyond current limitations. An experimental implementation can be viewed in this CodePen example (you must have canary web browser version + experimental features turned on to see effects).

(From Chrome Developers, old vs. new select with only HTML & plain CSS)

Current DaisyUI Implementation

DaisyUI's select component (select class) provides:

• Theme integration
• Pre-styled variants and sizes of the 'button' only (but customizable)
• Cross-browser consistency

Current limitations:

• Restricted to native select element capabilities
• Limited control over dropdown appearance
• Limited control over dropdown elements styling
• Default arrow styling
• Default selected styling
• and more...

New Specification Features

Key aspects of the proposed specification:

• <selectlist> element as a semantic wrapper
• <option> elements with full HTML content support
• Progressive enhancement pattern
• Native accessibility maintained
• CSS pseudo-elements for styling various inegral parts

Discussion Points

1. General feedback about the idea
2. How likely are you to use it
3. Implementation strategy ideas
4. Potential use cases
5. Compatibility with existing DaisyUI theme system
6. Implementation timeline considering current adoption stage
7. Anything else...

[saadeghi]

Thanks for the details 👍
We will be using the new specs whenever it gets available in major browsers by default. The details on how we can use it depends on how it will be available on the browsers. Currently it's experimental which means the specs can change or maybe even be replaced by another syntax (happened about other specs previously)

[BakirGracic]

Surely, it would be unwise to start intergrating right now. Just wanted to create this discussion so the community members can engage with anything positive about the matter ✋🏼

[BakirGracic]

coming back here to suggest adding icon/label support to select inputs like there are icons/labels for basic input fields