HTML select element: code explanations and tech summary#43714
HTML select element: code explanations and tech summary#43714chrisdavidmills merged 4 commits intomainfrom
Conversation
Add code explanation in example sections. Updated text for clarity and corrected minor errors in the examples section. ARIA role match spec: https://w3c.github.io/html-aria/#el-select
github-actions
bot
added
Content:HTML
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
Preview URLs (1 page) (comment last updated: 2026-04-09 12:50:31) |
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
Mostly makes sense, thanks @estelle. I've just got a few suggestions for you to look over.
| <ul> | ||
| <li>The select {{htmlelement("button")}} is optionally included as a child <code><button></code> element with a nested {{htmlelement("selectedcontent")}} element.</li> | ||
| <li>The drop-down picker is defined as any other content, which can include zero or more <code><option></code>, <code><optgroup></code>, <code><hr></code>, {{htmlelement("div")}}, {{htmlelement("script")}}, {{htmlelement("template")}}, and {{htmlelement("noscript")}} elements. | ||
| <li>{{HTMLElement("option")}}, {{HTMLElement("optgroup")}}, or {{HTMLElement("hr")}} elements, optionally preceded by a {{htmlelement("button")}} element with a nested {{htmlelement("selectedcontent")}} element if a drop down box.</li> |
There was a problem hiding this comment.
I'm not sure why you felt this change was necessary. It is my understanding that the permitted content differs when you've opted into customizable select rendering using appearance: base-select.
It could probably still do with a bit of a change to clarify that the dropdown picker is not always a thing (when you are dealing with ), but I still thought it was useful.
There was a problem hiding this comment.
future proofing. there is no legacy select in the spec anymore. Adding the newer features doesn't break any functionality of a select in browsers that don't support the button. This means the button is optional; it's still a select with or without a button. The customizing part is a CSS thing. You can add a button with no effect. the appearance: base-select is the magic sauce.
Basically, making this match the spec rather than making it match how a new feature is implemented, b/c soon it won't be new.
There was a problem hiding this comment.
OK, fair enough. That makes sense.
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
@estelle awesome, ready to merge. Lets goooooo
3 participants
Add code explanation in example sections. (moved from actual code and results areas)
Updated text for clarity and corrected minor errors in the examples section. ARIA role match spec: https://w3c.github.io/html-aria/#el-select
ordered see also