Select placeholder color Using CSS or JavaScript Examples

You can change the Select placeholder color by using CSS. Use id only to change the color or placeholder and if you want to change the color of the option then use the option also.

Example of Select placeholder color change

Target select to change the selected color style.
Then, target all options from this selection to reset their inherited color.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #businesstype {
        color: gray;
        }

        #businesstype option {
        color: green    ;
        }
    </style>
</head>
<body>
    <select id="businesstype">
        <option value="" disabled selected hidden>Business Type</option>
        <option value="">Restaurant</option>
        <option value="">Hotel</option>
        <option value="">Café</option>
        <option value="">Shop</option>
        <option value="">Services Agency</option>
        <option value="">NGO</option>
        <option value="">Institution</option>
    </select>
</body>
</html>

Output:

Q: How to change placeholder color using JavaScript?

Answers: You can’t really modify pseudo-selectors with JavaScript. You’ll have to modify an existing a element.

Do comment if you any doubts and suggestions on this topic.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

Select placeholder color Using CSS or JavaScript Examples

Example of Select placeholder color change

Q: How to change placeholder color using JavaScript?

Related