13

I am trying to hide an HTML element with CSS.

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

but it's very resilient, even with the Google Inspect element I cannot change the styling.

Mort
  • 3,379
  • 1
  • 25
  • 40
William
  • 421
  • 3
  • 6
  • 17
  • 1
    -1 because when I google 'hide element css' this was the first result: http://www.w3schools.com/css/css_display_visibility.asp and there is also a other that goes to stackoverflow so this can also be seen as a dublicate of this http://stackoverflow.com/questions/2694683/how-to-hide-element-label-by-element-id-in-css/2694700#2694700 – mariomario Oct 16 '13 at 09:52
  • 3
    This is incredibly simple. `display:none`. I can't believe you won't have tried that already though. If there really is a bigger issue here that justifies your "very resiliant" remark, then please provide more evidence, perhaps a fiddle example that demonstrates it so we can see what you mean, because the way you've asked the question, all we can do is suggest `display:none`, which is so obvious it's hardly worth posting. – Spudley Oct 16 '13 at 10:00
  • It wasn't working for me, either. Come to find out, it was because I had class="class1" class="class2" instead of class="class1 class2". I imagine that seems painfully basic to most, but it's what I missed. Hoping this can save someone from a couple hours' frustration. – donutguy640 Jul 05 '19 at 21:29

7 Answers7

47

It's simple, just set the display property to none in CSS:

#tinynav1
{
  display:none
}

again when you would like to show it set the display to block.

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Other advantages of using display:

display:none means that the element in question will not appear on the page at all (although you can still interact with it through the DOM). There will be no space allocated for it between the other elements.
visibility:hidden means that unlike display:none, the element is not visible, but space is allocated for it on the page.

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Vinay Pratap Singh Bhadauria
  • 9,829
  • 3
  • 28
  • 49
6

use display:none; or visibility:hidden;

Kishori
  • 1,065
  • 6
  • 12
  • @danrhul `visibility:hidden` also preserves the space it occupies, with the added bonus of the element not participating in events & tab order – SubjectCurio Oct 16 '13 at 09:56
1

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">
Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Markus
  • 1,069
  • 8
  • 26
1

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"

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Pbk1303
  • 3,702
  • 2
  • 32
  • 47
0

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;
}
MildlySerious
  • 8,750
  • 3
  • 28
  • 30
0

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.

matewka
  • 9,912
  • 2
  • 32
  • 43
0

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

Ridcully
  • 23,362
  • 7
  • 71
  • 86