placeholder for select tag
This question already has an answer here:
EDIT: This did/does work at the time I wrote it, but as Blexen pointed out, it's not in the spec.
Add an option like so:
<option default>Select Your Beverage</option>
The correct way:
<option selected="selected">Select Your Beverage</option>
According to Mozilla Dev Network, placeholder is not a valid attribute on a <select> input.
Instead, add an option with an empty value and the selected attribute, as shown below. The empty value attribute is mandatory to prevent the default behaviour which is to use the contents of the <option> as the <option> 's value.
<select>
<option value="" selected>select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select>
In modern browsers, adding the required attribute to the <select> element will not allow the user to submit the form which the element is part of if the selected option has an empty value.
If you want to style the default option inside the list (which appears when clicking the element), there's a limited number of CSS properties that are well-supported. color and background-color are the 2 safest bets, other CSS properties are likely to be ignored.
In my option the best way (in HTML5) to mark the default option is using the custom data-* attributes.1 Here's how to style the default option to be greyed out:
select option[data-default] {
color: #888;
}<select>
<option value="" selected data-default>select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select><select>
<option selected="selected" class="Country">Country Name</option>
<option value="1">India</option>
<option value="2">us</option>
</select>
.country
{
display:none;
}
</style>
下一篇: 选择标记的占位符