Select Placeholder Color  CSS

The <select> HTML tag doesn’t support a placeholder attribute like an <input> tag, and when it comes to the CSS color attribute it doesn’t leave many options for style. There are a few ways to provide a <select> dropdown with a placeholder that can have it’s color CSS styled similar to a ::placeholder pseudo element. The commonly accepted method is not a complete stand-in, but it’s worth mentioning and shown in Simple Approach below. There’s an alternative approach that I prefer to use, outlined in the Better Solution section below.

Simple Approach

If you need a simple way to add a placeholder for a select input then this approach will work without any CSS or JavaScript enhancement, just pure HTML.

Demo

HTML

<select>
  <option value="" disabled selected>Choose one...</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
  <option value="five">Five</option>
  <option value="six">Six</option>
</select>

Pros & Cons

If you want to style the placeholder text differently and provide for the ability to select and deselect an option value then an advanced approach that uses JavaScript is needed.

It’s important to note though that this method only provides a one-time placeholder when the page first loads. As soon as a user selects an option from the dropdown there is no way to show the placeholder again, and no way for the user to de-select an option.

Better Solution

The simple approach does work, with one issue though: once you select an option there’s no way to de-select it and revert back to a state showing the placeholder. This is because the placeholder option is disabled, so it can’t be selected.

If this isn’t an option for you then you may want something similar to this.

Demo

HTML

Here’s the code to make this work, with the only disadvantage being that it does involve JavaScript and CSS as a requirement. Pretty much everything I work on involves this, so I see no issue myself and the added UX provided as an outcome makes it well worth it.

<select placeholder="Choose one...">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
  <option value="five">Five</option>
  <option value="six">Six</option>
</select>

jQuery/JavaScript

The following jQuery enhanced JavaScript bring it to life. I’ve kept this deliberately simple to allow for easy implementation in whatever situation or framework you’re working with, but you could easily work this into a more advanced re-usable class if needed. Likewise, converting this to vanilla JavaScript without jQuery should be easy enough.

// Placeholder for dropdowns
const $placeholder = $("select[placeholder]");
if ($placeholder.length) {
  $placeholder.each(function() {
    const $this = $(this);

    // Initial
    $this.addClass("placeholder-shown");
    const placeholder = $this.attr("placeholder");
    $this.prepend(`<option value="" selected>${placeholder}</option>`);

    // Change
    $this.on("change", (event) => {
      const $this = $(event.currentTarget);
      if ($this.val()) {
        $this.removeClass("placeholder-shown").addClass("placeholder-hidden");
      } else {
        $this.addClass("placeholder-shown").removeClass("placeholder-hidden");
      }
    });
  });
}

CSS

The JavaScript will add and remove a .placeholder-shown and .placeholder-hidden class to the <select> element when values are selected or unselected. Style these however you’d like to suite your needs.

select.placeholder-shown {
  color: grey;
}
select.placeholder-hidden {
  color: black;
}

That’s it!

You now have a working implementation that replicates an <input> placeholder seamlessly for an HTML dropdown <select> field. It’s too bad this isn’t a native option, but perhaps one day it could be. For now, this provides the added functionality needed to support a robust implementation that follows patterns established with other HTML inputs. The other options I’ve found out there aren’t full replicas of what is available to an <input>, but this approach mentioned here should fill in the missing pieces. If you need a solid way to solve your select placeholder color CSS issues hopefully this provides it.