3 ms·
> Correct if I'm wrong, but this still doesn't allow us to define the dropdown content and selected content for each option separately? There are a few differe
by jaffathecake 2y ago
> Correct if I'm wrong, but this still doesn't allow us to define the dropdown content and selected content for each option separately?
There are a few different cases worth considering:
# I want to display the option content in the <selectedoption> as is
Great! Use <selectedoption>
# I want to display the option content in the <selectedoption> a little
differently (eg, hide the associated <img> or a different font-weight)
In this case, you're probably best off using a little CSS to style the content of <selectedoption> different, eg hide particular elements.
# I want to display something completely different in the <selectedoption>
<selectedoption> is optional, so one thing you can do here is just… not use it, and instead change the content of your <button> in response to state changes. This requires JavaScript.
If you really want to use <selectedoption> for this, then you could do this:
<option>
<div class="option-content">…</div>
<div class="selectedoption-content">…</div>
</option>
Along with the CSS:
option .selectedoption-content { display: none }
selectedoption .option-content { display: none }