23

Looking for a way to set the font color of a dropdown list placeholder. The following worked when the select id was required:

select:required:invalid {
    color: #9e9e9e;
}

However, I do not want these dropdown lists to be required for input. Once I remove the required tag, the placeholder font changes back to black.

The following is my dropdown list:

<select id="searchresults4" name="primarysport">
    <option value="">Choose Primary Sport...</option>
    <option>Football</option>
    <option>Basketball</option>
    <option>Baseball</option>
    <option>Softball</option>
    <option>Soccer</option>
    <option>Golf</option>
</select>
1
  • 1
    can you show what you're doing in a snippet?
    – DCR
    Commented Jun 16, 2017 at 1:17

8 Answers 8

30

To directly address the option font color, we can set the color on the select element to the light grey, then set all the option font colors except the first to black.

This way, the first option inherits the light grey, and shows as such while the select is both open and closed.

select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}
<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

Since the light grey font color is achieved by setting it on the select element, then :not overruling it when setting the option color to black, when a selection is made, the text will also show as grey.

If that is undesirable, we could change the color depending on whether the select has :focus, either showing the grey or black (depending on taste) when the element is or is not in use:

/* with the :focus here, we would show grey when not using the element */
select {
  color: black;
}
/* with the :focus here, we show grey when using the element */
select:focus {
  color: #9e9e9e;
}
option {
  color: black;
}
option:first-of-type {
  color: #9e9e9e;
}
<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

Further to those possibilities:

Although methods (including the following) can be employed to hide the initial/default non-value (i.e. "Choose Primary Sport...") when the select is open, that might not be desirable.

NOTE: Once an option has been selected, it is not possible to return to the default non-value initial state in the case of a change of mind.

If however this usability/accessibility issue is not a concern, here's a simple modification with the non-value default hidden when the select` is open:

select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}
/* the modification */
option:first-of-type {
  display: none;
}
<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

3
  • 12
    This actually doesn't work for me; the options always inherit the select's color even if I put an !important on the options
    – sammiepls
    Commented Dec 2, 2019 at 2:06
  • @sammiepls - using what version of what browser on what platform do you see which of the above snippets fail to function as described?
    – Fred Gandt
    Commented Dec 2, 2019 at 7:37
  • I'm on a Mac, on Chrome 78.0
    – sammiepls
    Commented Dec 3, 2019 at 2:06
29

Look at this way...

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select id="searchresults4" name="primarysport" required>
    <option value="" disabled selected>Choose Primary Sport...</option>
    <option>Football</option>
    <option>Basketball</option>
    <option>Baseball</option>
    <option>Softball</option>
    <option>Soccer</option>
    <option>Golf</option>
</select>

1
  • 5
    Hi. You may not have noticed that the question states "I do not want these dropdown lists to be required"; you may want to edit your answer accordingly.
    – Fred Gandt
    Commented Sep 6, 2018 at 6:54
2

I've been looking for this for a long time, and figured there isn't really a proper way to do this with only CSS (and not requiring a field) at the moment. So I did it with a bit of jQuery like so:

if (jQuery('select').length) {
    jQuery('select').each(function () {
        if ($(this).val() === "" || $(this).val() === null) {
            $(this).addClass('placeholder');
        } else {
            $(this).removeClass('placeholder');
        }
    });

    jQuery('select').on('change', function (e) {
        if ($(this).val() === "" || $(this).val() === null) {
            $(this).addClass('placeholder');
        } else {
            $(this).removeClass('placeholder');
        }
    });
}

Then in my (S)CSS I did:

select {
    color: #000;
}

select.placeholder {
    color: #999;
}
0

It can be achieved with pure javascript (to handle the options color property after the first click).
here is a working example

<!DOCTYPE html>
<html>
  <head>
    <style>
    #myselect{
    color:gray;
    }
    </style>
  </head>
  <body>
    <select id="myselect">
      <option disabled selected>Choose Item
      </option>
      <option>Item 1
      </option>
      <option>Item 2
      </option>
      <option>Item 3
      </option>
    </select>
    <script>
      // add event listener to change color in the first click  
      document.getElementById("myselect").addEventListener("click",setColor)
      function setColor()
      {
        var combo = document.getElementById("myselect");
        combo.style.color = 'red';
        // remove Event Listener after the color is changed at the first click
        combo.removeEventListener("click", setColor);
      }
    </script>
  </body>
</html>
1
  • I suggest converting your answer's code into a functional snippet to allow readers to quickly see it in operation, with the bonus of separating the languages for clarity.
    – Fred Gandt
    Commented Oct 22, 2021 at 13:38
0

Change the current CSS that you have into this:

select, select[size="0"], select[size="1"] {
  border-radius: 0px;
  border-color: rgb(169, 169, 169);
}

this will make the same result with:

select:required:invalid {
  color: #9e9e9e;
}

Without using required.

0

select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}
<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Aug 20, 2023 at 17:46
0

I am using react, and I solved this with the condition

<select 
     style={{ color: data.state.length > 0 ? '#482668' : '#dad3e0' }}
>
    <option></option>
</select>

CSS
option {
   color: #482668
}
-2

select {
    color: #9e9e9e;
}
<select id="searchresults4" name="primarysport">
    <option value="">Choose Primary Sport...</option>
    <option>Football</option>
    <option>Basketball</option>
    <option>Baseball</option>
    <option>Softball</option>
    <option>Soccer</option>
    <option>Golf</option>
</select>

1
  • Does not answer the question.
    – Fred Gandt
    Commented Oct 22, 2021 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.