- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do I make a placeholder for a 'select' box?
In HTML, placeholder attribute is present for creating a placeholder, but unfortunately it isn’t available for the select box.
Create Placeholder for select
We can use the option tag to define an option in a select list. The value attribute of the option tag is used for this. Here we have set List of Technologies as the placeholder text −
<option value="">List of Technologies</option>
Example
Let us now see the complete example −
<!DOCTYPE html> <html> <head> <style> select { appearance: none; background: yellow; width: 100%; height: 100%; color: black; cursor: pointer; border: 2px dashed orange; border-radius: 4px; } .select { position: relative; display: block; width: 10em; height: 3em; line-height: 3; overflow: hidden; border-radius: .25em; padding-bottom: 10px; } </style> </head> <body> <h1>Programming Courses</h1> <p>We have covered the following programming technologies:</p> <div class="select"> <select name="st" id="st"> <option value="">List of Technologies</option> <option value="1">Python</option> <option value="2">Java</option> <option value="3">C</option> <option value="4">C++</option> <option value="5">Ruby</option> <option value="6">Kotlin</option> <option value="7">GO</option> <option value="8">C#</option> </select> </div> </body> </html>
Output
Create Placeholder for select and disable it
Since the placeholder won’t be select by the user and is only for displaying a text, we need to disable it. We will disable it using the disabled attribute of the <option> tag. This attribute disables the option −
<option value="" disabled selected>Select any Technology</option>
Example
Let us see the example now −
<!DOCTYPE html> <html> <head> <style> select { appearance: none; background: yellow; width: 100%; height: 100%; color: black; cursor: pointer; border: 2px dashed orange; border-radius: 4px; } .select { position: relative; display: block; width: 10em; height: 3em; line-height: 3; overflow: hidden; border-radius: .25em; padding-bottom: 10px; } </style> </head> <body> <h1>Programming Courses</h1> <p>We have covered the following programming technologies:</p> <div class="select"> <select name="st" id="st"> <option value="" disabled selected>Select any Technology</option> <option value="1">Python</option> <option value="2">Java</option> <option value="3">C</option> <option value="4">C++</option> <option value="5">Ruby</option> <option value="6">Kotlin</option> <option value="7">GO</option> <option value="8">C#</option> </select> </div> </body> </html>
Output
Advertisements