Q:

How to Make a Placeholder for a Select Box in HTML

mhmadesk
Save to bookmark
|
2022-05-17
|
  532 
Very Easy
0

How to Make a Placeholder for a Select Box in HTML

Html programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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:

<!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; }.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now