Posted by tosh 3/31/2025
Have you noticed how every AI interface needs to let you choose between models? The current select element is embarrassingly inadequate when you need to show more than just text labels. You want to display model capabilities, performance indicators, context sizes - not just "GPT-4" vs "Claude 3.7" as plain text.
There was one thing that I hoped would work, but didn't, which is applying an :after pseudo-class to <option>, so something like this:
option:after {
content: ' (' attr(data-descr) ')';
}
<select>
<option data-descr="some description">Foo</option>
<option data-descr="some other stuff">Bar</option>
</select>
There's another way to try it though...
I'd try putting two separate <span>s inside each option, one for the short description and one for the long description.
I'd hide one span with css if it was inside an <option> tag.
I'd hide the other span if it was inside a <selectedoption> tag.
That would probably work.
The papercut would be that when gracefully degrading back to an ordinary select element, it might show both the short and the long selections which depending on how you write the content may or may not be an issue.
The problem is that you can't target the span in the original parser.
But, you could use a template, since it's contents are ignored by text content parsers.
You can have your option as:
<option value="red"> <span>Normal Difficulty</span> <template>- The way it's meant to be played</template> </option>
With the original parser, this will be parsed as:
<option value="red">Normal Difficulty</option>
And with the new parser (so long as you opt into it with the `appearance: base-select` rule):
<option value="red"> <span>Normal Difficulty</span> <template>- The way it's meant to be played</template> </option>
---------------------------
Then once you've opted into the new parser, you can target both the span and template to render how you want. (e.g. Give span a larger font-weight, give template a display mode of block and italicised text)
I assumed your comment was trying to give the parent commenter a strategy that would work with the "classic" select but I see now that you mentioned "selectedoption" so you were talking about the new one.