The <select> element can now be customized with CSS

What I was recently disappointed to find out is that you can't have a separate "display name" for the option items. That is, when the user clicks and the dropdown opens, I want the item labels in the dropdown to be of the form "$TITLE ($SHORT_DESCRIPTION)", but then when the dropdown is closed and something is selected, the control should just read "$TITLE". There are a few hacks to sort of make that work, but they all have downsides that make them unusable for me. (The purpose for me was to make it so the <select> element doesn't take up as much horizontal space; most of the workarounds end up missing that quality.)

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>

Unfortunately this just doesn't work (I presume because <option> can't contain DOM elements aside from unstyled text), but I wonder if it will work now.

`attr()` has had terrible support which is a shame because it's been around for ages and could have let us do a lot of things without having to implement stuff manually.

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.

Ignoring this new feature, you can't put spans inside an option, only text. It's odd that they have this example in the post for the "old" way but they show it retaining the spans.

You can put <span>s inside an <option>. The <option>'s `innerText` is used to populate the native control's label, meaning the inside of the spans are too.

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)