What are the possible ways to hide an element via CSS [closed]

Answer 1

Use this CSS

.tinynav {
    display: none;
}

or

.tinynav {
    visibility: hidden;
}

The difference is that the former will make the select not rendered at all and the latter will make the select rendered (it will take the space of the document) but it will be completely invisible;

Here's a fiddle to show the difference: http://jsfiddle.net/rdGgn/2/
You should notice an empty space before the text in third line. It is the select that is rendered but not visible. There is no space before the second line of text, because the select is'nt rendered at all (it has display:none).

There is also a third option which is

.tinynav {
    opacity: 0;
}

It behaves almost the same as visibility: hidden but the only difference is that with opacity: 0 you can still click the select. With visibility: hidden it is disabled.

Answer 2

You can use display:none or visibility:hidden, based on your requirements:

#tinynav{display:none;}

or

 #tinynav{visibility:hidden;}

Refer the below URL for better understanding of display:none and visibility:hidden.

Difference between "display:none" and "visibility:hidden"

Answer 3

use display:none; or visibility:hidden;

Answer 4

CSS:

select#tinynav1  { display: none; }

or if multiple selects should be hidden, use the corresponding class:

select.tinynav1  { display: none; }

As inline-style you could do it also (which you can try for inspector):

<select id="tinynav1" style="display: none">

Answer 5

If you want to hide it and collapse the space it would need, use display: none; if you want to keep the space, use visibility: hidden.

<select id="tinynav1" class="tinynav tinynav1">

CSS

.tinynav {
    display: none;
}

Answer 6

Use style="display:none" directly on the <select> or create a css class having that setting and assign the class to the <select>.