Hidden HTML5 attribute not compatible with Bootstrap

Question

I reviewed the code and decided to change the usual style="display:none" to use the HTML5 hidden attribute to hide the button. Just to find that it is incompatible with the bootstrap btn class. However, I will continue to use the style display attribute, but I am wondering if this is a bug that should be reported, or just a function that everyone should know about.

The corresponding jsfiddle can be found here

Answer 1

The HTML5 specification already warns developers about this:

Note. . Because this attribute is typically implemented using CSS, it can also be overridden using CSS. For example, a rule that applies "display: block" to all elements overrides the effects of a hidden attribute. Therefore, authors should take care of writing style sheets to ensure that the attribute is still as expected.

- HTML5 Specification - 7.1 hidden attribute

The problem you are facing is that the Bootstrap .btn selector defines display: inline-block , which overrides the hidden display: none attribute.

This means that specificity will be a problem. This is a rare case when !important may be desirable. I would personally follow the following style rule:

 [hidden] { display: none !important; } 

This ensures that all elements with the hidden attribute are set so that they are not displayed, regardless of their specificity. This is doubly good, as it will make the hidden attribute effective for any browser that supports the [att] selector notation (which is any browser that supports CSS2).

---

Working demo of JSFiddle .

Answer 2

Try adding this to your css:

 *[hidden] { display: none !important; } 

eg; https://fiddle.jshell.net/bh8h5tya/

Answer 3

Not hiding because bootstrap applies display: inline-block to .btn class

Bootstrap provides the following .hidden class, which can be used to show / hide elements. Try using this.

 .hidden { display: none !important; }