How to: Hidden Select Box in HTML

CSS provides you with a "hidden" attribute that lets you hide any HTML element on a Web page including a "select" box. CSS interacts with your HTML code to control the layout and visual appearance of Web pages. A "select" box is a drop-down element that limits user input, so they must choose one of the predefined values you set up. You set the drop-down box as "hidden" when you want to remove the option from user view without deleting the drop-down from the code.

Video of the Day

Woman with laptop.
credit: g-stockstudio/iStock/Getty Images


In Windows Explorer, Right-click the HTML file that contains the drop-down select box. Select "Open With" in the pop-up window, then double-click your preferred HTML editor.


Locate the drop-down select box in the HTML code. To do a search for the drop-down element, press the "Ctrl" and "F" keys to open the "Find" dialog window. Type "<select" in the search text box and press "Enter."


Create the "select" box in the HTML code. If you do not already have a select box created, you must create one with a list of the values for readers to select. Copy and paste the following code to create a select box:

This select box displays a list of colors. Replace the color values with any text you choose.


Type the following code within the "

style="visibility: hidden"

Below is an example of a hidden select box with the hidden style code using the select box created in Step 3:

Show Comments