My select element is displaying blank option values no matter what I do. The dropdown has the correct number of options, but they are all empty. Here's the HTML snippet:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC"></option>
<option value="Vanguard"></option>
</select>
I suspect that some CSS from another library is causing this issue by overriding the default styling of select>option. I've tried removing each linked library one by one, but it didn't solve the problem. Additionally, I attempted to apply a .clear-css class to the option elements like so:
.clear-css {
all:unset;
}
and then used jQuery to add this class to all options just before rendering them:
$('option').addClass('clear-css');
However, the options remained blank. I also tried:
.clear-css {
all:initial;
}
Still no luck. Adding the clear-css class to the select element itself made the entire select element disappear.
Does anyone have any suggestions on how to fix this?