WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Make a Placeholder for a Select Box in HTML

Topic: HTML / CSSPrev|Next

Answer: Use the disabled and selected Attribute

There is no attribute like input's placeholder for select box dropdown.

However, you can create similar effect by using the HTML disabled and selected attribute on a <option> element that has empty value. You can also apply the attribute hidden, which hides the placeholder option once selection is made in the dropdown.

Now, let's try out the following example to understand how it basically works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Make Placeholder for Select Box</title>
  • <style>
  •     select:invalid{
  •         color: gray;
  •     }
  •     option{
  •         color: black;
  •     }
  • </style>
  • </head>
  • <body>
  •     <select required>
  •         <option value="" disabled selected hidden>Choose Gender...</option>
  •         <option>Male</option>
  •         <option>Female</option>
  •     </select>
  • </body>
  • </html>

The hidden attribute do not supported in Internet Explorer 10 and below. If you need to support IE10 and lower you can alternatively use the CSS option[disabled]{ display: none; }.


Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.