How to clear css from select element?

Question

I have a select element and no matter what I try, the option values are blank. The number of options in the drop down is correct, but they are blank. Here is the html:

          <label for="accountBrokerageName">Brokerage:</label>
          <select id="accountBrokerageName">
             <option value="Interactive Brokers, LLC"></option>
             <option value="Vanguard"></option>
          </select>

I'm assuming some css from another library is overriding the standard select>option css. I've tried commenting out each linked library one at a time but no joy. I've tried adding a .clear-css class to the option like this:

.clear-css {
  all:unset;
}

and append it to all options using jquery just before it is used, like this:

$('option').addClass('clear-css');

Still blank.

I've also tried

.clear-css {
  all:initial;
}

Still blank.

I also tried adding the clear-css class to the select element, but that causes the whole select element to disappear.

Any suggestions?

You forgot to add the html content of options. Do <option value="Interactive Brokers, LLC">Interactive Brokers</option><option value="Vanguard">Vanguard</option>. It has nothing to do with css — Navjot Singh
– Navjot Singh, Commented May 3, 2021 at 22:47

user15246403 · Accepted Answer · 2021-05-03 22:55:27Z

1

You need to include the values for each option between the opening and closing <option> tags. The value doesn't need to match the text content. In fact, it's usually better to remove any special characters and even spaces when working with external APIs, like this:

// This JS is just for the sake of example, to log the new value with each change
const select = document.getElementById('accountBrokerageName');
select.addEventListener('change', () => console.log(select.value));

<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
 <option value="" disabled selected>Choose an option...</option>
 <option value="interactive-brokers-llc">Interactive Brokers, LLC</option>
 <option value="vanguard">Vanguard</option>
</select>

answered May 3, 2021 at 22:55

user15246403

Sign up to request clarification or add additional context in comments.

2 Comments

user3217883 Over a year ago

Well that's got to be the blunder of blunders of all time. I tried everything but the obvious! Too long staring at the code I guess. But I learned something from you about the arrow function shortcut and the disabled selected technique. Thank you!

user15246403 Over a year ago

Glad I could help!

Brandon McConnell · Accepted Answer · 2021-05-03 22:51:00Z

1

Select values must be within the actual <option> tags:

<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
 <option value="Interactive Brokers, LLC">Interactive Brokers, LLC</option>
 <option value="Vanguard">Vanguard</option>
</select>

answered May 3, 2021 at 22:51

Brandon McConnell

6,1781 gold badge26 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to clear css from select element?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related