How to: Hidden Select Box in HTML

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.
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 . 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...