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

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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create a Placeholder for the <select> Box with HTML5

There does not exist a placeholder 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 disabled and selected attributes with the HTML5 hidden 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>

Result

Select box with a placeholder

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 disabled and selected 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>

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 CSS :invalid pseudo-class, which allows you to style the <select> element when it's in the "placeholder" state. The :invalid works here because of the empty value in placeholder option.

When a value is set, the :invalid 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>