W3docs
en
Log in

How to Create a Placeholder for an HTML5 <select> Box by Using Only HTML and CSS?

Learn how to make a placeholder for a select box. Use only 3 HTML attributes or CSS :invalid pseudo-class and the display property set to none.

Tags

Styling HTML form fields, mainly <select> fields with CSS has always been a bit complicated. Changing a <select> form field in a particular way is frequently unmanageable. For that purpose, many websites are replacing <select> elements with a custom-built solution powered by HTML and CSS.

Create a Placeholder for the <select> Box with HTML5

There does not exist a <span class="attribute">placeholder</span> attribute for the <select> tag. However, there are some ways of making a placeholder for the select box.

The easiest way of making a placeholder for the <select> element is using the <span class="attribute">disabled</span> and <span class="attribute">selected</span> attributes with the HTML5 <span class="attribute">hidden</span> global attribute.

Example of creating a placeholder for the <select> box with HTML5:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Select box with a placeholder</h2>
    <select name="drinks" required>
      <option value="" disabled selected hidden>Choose a drink</option>
      <option value="coffee">Coffee</option>
      <option value="tea">Tea</option>
      <option value="milk">Milk</option>
    </select>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> Select box with a placeholder <select name="drinks" required=""> <option disabled="disabled" hidden="" selected="selected" value="">Choose a drink</option> <option value="coffee">Coffee</option> <option value="tea">Tea</option> <option value="milk">Milk</option> </select> </div>Here is the second method of adding a placeholder for your select box. First, you need to create your select items with the help of the <option> tag. Then, set the <span class="attribute">disabled</span> and <span class="attribute">selected</span> attributes for your empty element, which is supposed to be the placeholder.

Now, you can see that the first line is like a placeholder field. It will be undetectable but still visible.

Example of creating a placeholder for the <select> box with an unselectable line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Select box with a placeholder</h2>
    <select name="drinks" required>
      <option value="" disabled selected>Choose a drink</option>
      <option value="coffee">Coffee</option>
      <option value="tea">Tea</option>
      <option value="milk">Milk</option>
    </select>
  </body>
</html>
Try it Yourself »

To make it non-visible after the user clicks to select an option, you must set the display property to its "none" value. And also set the :invalid pseudo-class to fail to validate the contents of the <select> box placeholder. Also, specify a color for your placeholder by using the CSS color property.

When the <select> element is required, it allows the use of the <span class="property">CSS :invalid</span> pseudo-class, which allows you to style the <select> element when it's in the "placeholder" state. The <span class="property">:invalid</span> works here because of the empty value in placeholder option.

When a value is set, the <span class="property">:invalid</span> pseudo-class is dropped. You can also optionally use the :valid pseudo-class.

Example of creating a placeholder for the <select> box with the :required and :invalid pseudo-classes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      select:required:invalid {
        color: #666;
      }
      option[value=""][disabled] {
        display: none;
      }
      option {
        color: #000;
      }
    </style>
  </head>
  <body>
    <h2>Select box with a placeholder</h2>
    <select name="drinks" required>
      <option value="" disabled selected>Choose a drink</option>
      <option value="coffee">Coffee</option>
      <option value="tea">Tea</option>
      <option value="milk">Milk</option>
    </select>
  </body>
</html>
Try it Yourself »