Hide empty option value with css

Question

I have a select option html, i need to hide one of the options only with css without changing the html structure like adding more class or id.

here's the html structure:

<select id="net_terms_id" name="order[account][net_terms_id]" class="select admin__control-select">
       <option value>-Select Net Term-</option>
       <option value="Devtest">Devtest</option>
       <option value="15 Days Net">15 Days Net</option>
</select>

here's what i've done so far with the css:

#net_terms_id option:empty {display: none;}
#net_terms_id option[value=""] {display: none;}

Answer 1

If you want to hide the empty option with just css you can try adding selected disabled hidden style='display: none' and that should do the trick.

<select id="net_terms_id" name="order[account][net_terms_id]" class="select admin__control-select">
       <option value selected disabled hidden style='display: none'>-Select Net Term-</option>
       <option value="Devtest">Devtest</option>
       <option value="15 Days Net">15 Days Net</option>
</select>