Add placeholder for select box
Add placeholder for select box – Html5 attribute placeholder is not valid for selecbox so you can’t ass the placeholder in select box using this attribute. It is very common and often we need to add placeholder of select box in HTML and HTML5. There are many ways to add placeholder for select box. Many developers adds the placeholder using javascript and css but but will not use the javascript and css. Here in this tutorial we are going to add the placeholder of select box with various example and online demo.
Add placeholder for select box
You can add placeholder without using css and javascript simply as –
Add placeholder for select box:
<select>
<option value="" default selected>Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
|
In the above example first option will be default option and will be selected with the label “Select Option” t which will work as placeholder for selectbox.
If you run the above example it will produce output something like this –
Add select box placeholder color
If you want add the color in the placeholder of select box add the following css as –
Add placeholder for select box:
<style>
select option[default] {
color: #999;
}// add your own color
</style>
<select>
<option value="" default selected>Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
|
In the above example will add the color in placeholder. You can add your own color to make the placeholder more attractive.
Advertisements
