How to: Hidden Select Box in HTML

Techwalla may earn compensation through affiliate links in this story.
Image Credit: PeopleImages/E+/GettyImages

An HTML select box is a web page element that lets you select from a range of options. It's usually represented as a drop-down menu. It is possible to hide a select box or another web page element using HTML or the styling language CSS. Other options include programmatically hiding elements using JavaScript or setting up hidden inputs in HTML that don't show on the web page under most circumstances.


HTML for Select Hidden Element

Hide a select box by putting styling options on it using HTML and CSS to make it invisible. The two principal ways to do this using CSS and HTML to hide an element are with the visibility style attribute and the display style attribute.


Video of the Day

When you set an element's visibility to hidden, the element doesn't show on the web page but still takes up space as if it were there. By default, visibility is set to "visible," and the object displays normally.

If you prefer to have the element not take up any space on the page so that the website is rendered as if the element wasn't in the HTML code at all, use the display attribute instead. Set display to "none" to make the object invisible.


Either do this in the style attribute on the object, such as

Using JavaScript to Hide Select

Use JavaScript to programmatically hide or show a select box or any other HTML element. To do this, write code to alter the display or visibility attributes when a particular situation arises. You do this with a line of JavaScript similar to this: document.getElementById("HiddenBox").style.display = "none";


If you use a library like jQuery, you may find a more idiomatic way to do this.


Hidden Input Elements

HTML also includes the concept of a hidden input element that passes data to a web form when the form is submitted. It's usually not visible unless the user reads the page's source code.


The syntax looks like . Hidden inputs are sometimes used for form fields generated from user input or for randomized security codes used to verify that a user is using an actual version of a form downloaded from the website.

Because users can access the content of hidden inputs by using JavaScript, reading the page's source code or monitoring network traffic, they shouldn't be used for information that must be concealed from end users.



Report an Issue

screenshot of the current page

Screenshot loading...