Advertisements
How to Make a Placeholder for a Select Box in HTML
Topic: HTML / CSSPrev|Next
Answer: Use the disabled and selected Attribute
There is no attribute like input's placeholder for select box dropdown.
However, you can create similar effect by using the HTML disabled and selected attribute on a <option> element that has empty value. You can also apply the attribute hidden, which hides the placeholder option once selection is made in the dropdown.
Now, let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Make Placeholder for Select Box</title>
<style>
select:invalid{
color: gray;
}
option{
color: black;
}
</style>
</head>
<body>
<select required>
<option value="" disabled selected hidden>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
</body>
</html>The hidden attribute do not supported in Internet Explorer 10 and below. If you need to support IE10 and lower you can alternatively use the CSS option[disabled]{ display: none; }.
Related FAQ
Here are some more FAQ related to this topic:
- How to change input field or textarea placeholder text color using CSS
- How to expand select box to its default width on focus using CSS
- How to change the default text selection color in the browsers using CSS
Advertisements
