Posted by tosh 4 days ago
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.
Should be able to style more than just selects, after all. Why the fuck can't I change the mask character in a password field to be something other than bullets? Hah. I had better examples too, but it looks like in the past 10 years or so, they've slowly been CSS-ized. Nice. Now if I could just style half the first line (first-line does the entirety of the line or nothing).
Sounds like you can create loops. If the select had a style element that turns this off again would it keep changing state?