Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

display:none doesn't work for option

Tags:

html

css

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 ?

like image 563
wener Avatar asked Oct 09 '13 11:10

wener


People also ask

How do I set up display none?

To hide an element, set the style display property to “none”. document. getElementById("element"). style.

Is display none still rendered?

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.

How do I hide without display none?

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.


3 Answers

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

like image 199
Roberto Avatar answered Oct 12 '22 21:10

Roberto


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

like image 43
Vinay Pratap Singh Bhadauria Avatar answered Oct 12 '22 22:10

Vinay Pratap Singh Bhadauria


There is a technique for hiding options within a select in this post: How to hide a <option> in a <select> menu with CSS?

like image 37
acairns Avatar answered Oct 12 '22 22:10

acairns