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

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.

Solution 1:

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.

Solution 2:

use display:none; or visibility:hidden;

Solution 3:

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">

Solution 4:

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

#tinynav{display:none;}

 #tinynav{visibility:hidden;}

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

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