Skip to content

Select placeholder color Using CSS or JavaScript Examples

  • by

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

  1. Target select to change the selected color style.
  2. 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:

Select placeholder color change

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

Leave a Reply

Your email address will not be published. Required fields are marked *