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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="en"> <head> <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> </head> <body> <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> </body> </html> |
In the above example, we set the color gray for the placeholder. Run the HTML and check the output in the browser.
Output
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
