Menu
Demo here
HTML:
display:none <b>not works</b>,the hidden can <b>not select</b>.<br>
<select size="5">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select><br>
display:none <b>works</b>,the hidden <b>can select</b>.<br>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
CSS:
select{width:50px;}
[value=C]{
display: none;
}
/* will hold the position */
[value=B]{
visibility: hidden;
}
The size attribute will affect the display and visibility, what happen to this ?
How can I hide the option in select which has a size attribute ?
563
To hide an element, set the style display property to “none”. document. getElementById("element"). style.
display: none : hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new element with the same contents. visibility: hidden : hides the element and keeps its rendering state.
Use visibility: hidden It works similarly to display: none; but instead of actually removing the element it just hides it and makes it invisible. So, if the element took up some amount of space before, it will still take up the same amount of space within your visible design — visitors just won't be able to see it.
See updated section
I think you can not do that only with CSS for all browsers you'll need some JS code, there is a previous question quite similar:
How to hide a <option> in a <select> menu with CSS?
In Chrome (v. 30) "display:none" doesn't work, however in Firefox (v. 24) It works, the option with "display:none" doesn't appear in the list.
UPDATE2:
In the current Chrome (v. 70) an Firefox (v. 63) versions, the use of css with "display:none" along with attribute "disabled" in the option tag removes the option from the list and it doesn't appear any more.
<html><body>
<select>
<option disabled style="display:none">Hola</option>
<option>Hello</option>
<option>Ciao</option>
</select>
</body></html>
Thanks to @achecopar for the help
199
The property Display:none wont work on the options tag
so you have only two options as work around
1. Either disable then with disabled="disabled".
2. Remove the options you don't want to see and insert them again when needed.
you may be able to find some other work around too, but i don't think it will be consistent in all the browsers
43
There is a technique for hiding options within a select in this post: How to hide a <option> in a <select> menu with CSS?
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
