How to add a placeholder for a select box

Today we will show you how to add a placeholder for a select box in HTML. The placeholder attribute does not exist in the select tag but we have a couple of alternatives to show the placeholder for a select tag.

Checkout more articles on Select2

Here we will show you the best and easy way to show the placeholder for a `select` dropdown.

In the verify the first step, we have to add the placeholder as a first option in the select tag as an empty string and set the `disabled`, `selected`, and `hidden` for the placeholder option. Look at the small example.

index.html





  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add a placeholder for a select tag - Clue Mediator</title>



  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    select {
      font-size: 15px;
      padding: 5px;
      border-radius: 4px;
    }

    select:invalid {
      color: gray;
    }
  </style>
  <form>
    <h3>Add a placeholder for a select tag - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue
        Mediator</a></h3>

    <select required>
      <option value="" disabled selected hidden>Select Payment Type</option>
      <option value="cash">Cash Payment</option>
      <option value="credit">Credit Card</option>
      <option value="debit">Debit Card</option>
    </select>
  </form>

In the above example, we set the color `gray` for the placeholder. Run the HTML and check the output in the browser.

Output

Output - How to add a placeholder for a select box - Clue Mediator

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

How to add a placeholder for a select box

Output

Categories

Tags