CODEWITHSUNDEEP
htmlcss
Michael Philibin
Michael Philibin

Reputation: 403

Set font color for select option placeholder

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>

Upvotes: 24

Views: 72999

Answers (8)

Sakiro
Sakiro

Reputation: 11

In my case works well, try this:

                   <select class="select">
                      <option value="" selected disabled hidden>
                        text
                      </option>
                      <option value="reason1">text</option>
                      <option value="reason2">text</option>
                      <option value="reason3">text</option>
                    </select>

template styles:

.select {
  width: 274px;
  height: 48px;
  padding: 8px 12px;
  color: var(--your-color); // your "placeholder" color
  border: 1px solid var(--border-color); // your border color
  background: var(--your-color); //your background color

  option:not(:first-of-type) {
    color: var(--text-ribbon-color); //your ribbon color
    background-color: var(--background-ribbon-color); // your ribbon bg color
  }
}

Upvotes: 1

Kunal Tyagi
Kunal Tyagi

Reputation: 4187

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
}

Upvotes: 1

Reynante Daitol
Reynante Daitol

Reputation: 499

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.

Upvotes: 0

Loosie94
Loosie94

Reputation: 665

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

Upvotes: 3

Jonathan Applebaum
Jonathan Applebaum

Reputation: 5986

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>

Upvotes: 0

Fred Gandt
Fred Gandt

Reputation: 4312

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>

Upvotes: 31

Ramon Marques
Ramon Marques

Reputation: 3264

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>

Upvotes: 30

DCR
DCR

Reputation: 15700

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>

Upvotes: -2

Related Questions