Style.Display='None' Doesn't Work on Option Tags in Chrome, But It Does in Firefox

style.display='none' doesn't work on option tags in chrome, but it does in firefox

The workaround is to remove the option elements in response to your event and add them back if and when they are needed. IIRC, IE will not allow you to set the display to none on option elements. I would advise storing the removed elements in an array so that you can easily add them back in.

element.style.display = 'none' not working in firefox but is in chrome

@Neil is partly correct. The reason its not working is because of the way that Mozilla has implemented transitions.

However its the opposite of what he said. The transition is applied, its the display:none that is not applied. It essentially gets overruled by the fact that there is a transition rule in the css.

The way around this (currently, hopefully Mozilla changes their implementation) is to use multiple functions and 2 different css class rules. (which is bulky but still can be simpler then moving something with javascript).

So your first class has a transition on it that moves the tile off screen. It then gets a new class that has no transition rule. you can then set its position with javascript to the opposite side of the carousel and it will go there instantly without being visible because it no longer has a transition property. Finally you re-apply the transition class, and move it to its final position on the other side of the carousel.

The effect is the same as achieved in Chrome, but definitely not as elegant.

display:none doesn't work for option

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

Style.display = 'none' does not work on BBC.com Overlay Element

Note: Don't do the setAttribute thing below, use setProperty as shown in this answer to the earlier question. (I'll delete this answer when/if it's un-accepted by the OP.)

You're specifying an invalid property value; !important can be used in style rules but not in the specific values you assign via the style object. I'm surprised you're seeing the display: none in the style area. I don't with Chrome or Firefox when I do that (perhaps it was left over from having done .display = "none" and not seeing it work?):

const overlay = document.getElementById("example");
overlay.style.display = "none !important";

<div id="example">x</div>
<div>y</div>

display:none property not working in firefox and chrome

You must not use multiple style attributes. Instead of

 <tr style="height:5px" ... style='display:none'>

use

 <tr style="height:5px; display:none">

jQuery visible doesn't work in all browsers, but in Firefox

It's not a jQuery bug - just (yet another) browser difference.

IE won't let you set display:none on option elements (style.display='none' doesnt work on option tags).

If you look at your fiddle in both FF and IE, you'll see that the <select> still contains all four elements in IE, but only two in FF, regardless of jQuery being present.

The solution would probably be to actually remove the elements and replace when needed.

Style.Display='None' Doesn't Work on Option Tags in Chrome, But It Does in Firefox