What is best way to hide an option tag?

HTML-CSS
1

With CSS or with JS? Like class name or with hidden attribute? Any idea?

Thanks.

2

You can make a class with display: none. Then add/remove the class to hide/show whatever it is you want to toggle.

1 Like
3

It really also depends on what you are hiding, both from a layout and accessibility perspective.


https://allyjs.io/tutorials/hiding-elements.html

1 Like
4 
<option hidden>Some Option</option>

That should work. However, this is likely to not be completely cross-browser (sorry, have never tried it). This isn’t really a common thing to want to do, and ideally you generate the correct options either server-side or dynamically with JS rather than showing/hiding specific options, which the element is not designed to do.

Edit: Just as an addendum, your last ten or so posts have all been attempts to abuse various form elements. I get what you’re trying, I’ve been through the same (painful) process and I think lot of other devs on here will have been through it to. But beyond basic styling changes, form elements are inflexible for a reason (they have to work accessibly across platforms). A lot of what you’ve been trying to do is a massive no-no from accessibility perspectives.

If you genuinely want to implement completely custom styled form elements, look at web components, which allow you to build your own completely custom html elements (by extending existing ones).

1 Like