How do I set the fiirst select option to be gray even when the dropdown is closed

Question

I am trying to set the color of just the first item in the dropdown to be a different color even when the dropdown is closed.

 <label for="labelCountry">Country</label>
      <select name="country" class="form-control" id="country" onchange="stateMenu(this.value);">
                        <option style="color:#AFBAC7 !important;" value="" selected>Select a Country</option>
                        <option value="US">United States</option>
                        <option value="CA">Canada</option>
                        <option value="In">India</option>
                        <option value="UK">United Kingdom</option>
                        <option value="FR">France</option>
                        <option value="CH">China</option>
                        <option value="JA">Japan</option>
                        <option value="GE">Germany</option>
                        <option value="AU">Australia</option>
                        <option value="RU">Russia</option>
                        <option value="CA">Canada</option>
                        <option value="PA">Pakistan</option>
                        <option value="IT">Italy</option>
                        <option value="SP">Spain</option>
                        <option value="SK">South Korea</option>
                        <option value="PH">Philippines</option>
                        <option value="EN">England</option>
                        <option value="EG">Egypt</option>
                        <option value="SI">Singapore</option>
                        <option value="GR">Greece</option>
                        <option value="BR">Brazil</option>
       </select>

You may want to change your question and add the code. A hint it to use the CSS `:first-child` selector. — Daniel, Jun 13 '17 at 15:24
The first style selector only changes the color of the first item when the drop down is open. I would like the first item color to be changed even when the drop down is closed. — Nalini Raghavan, Jun 13 '17 at 15:25
Why does it matter when it is closed though if no one can see it? — Sensoray, Jun 13 '17 at 15:28
When it is closed it still has the "Select a country" displayed and thats the main element I want to change the color. — Nalini Raghavan, Jun 13 '17 at 15:32
You're looking for a way to style the placeholder of a select. See [this question](https://stackoverflow.com/questions/21652680/changing-color-of-placeholder-in-dropdown) and [this one](https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box) for possible solutions. — tao, Jun 13 '17 at 15:39

tao · Answer 1 · 2017-06-13T17:13:18.057

One way to do this without JavaScript is to make the select required and style it up as gray when invalid.

However, note that if no option is selected your <form> will not validate, so this is not good if you use it on a select that's not actually required and you need the form to validate.

select:invalid, 
select option:first-child {
  color: #999;
}
select:invalid option {
  color: black;
}
select option:first-child {
  color: #999;
}

<select required>
  <option value="">Please select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Although I really like CSS only solutions, in this particular case it feels more correct to just use a trivial check onchange and set color of the <select> by applying/removing a class:

function onChangeHandler() {
  var select = document.getElementById('theSelect');
  select.classList[select.value === '' ? 'add':'remove']('empty');
}

select.empty, select option:first-child {
  color: #999;
}
select, .empty option:not(:first-child) {
  color: black;
}

<select onchange="onChangeHandler()" id="theSelect" class="empty">
  <option value="">Please select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

And this would be the jQuery version:

$('#theSelect')
  .on('change', function(){ 
    $(this)[
      $(this).val() === '' ? 'addClass':'removeClass'
    ]('empty');
  })

select.empty, select option:first-child {
  color: #999;
}
select, .empty option:not(:first-child) {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="theSelect" class="empty">
  <option value="">Please select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Alex · Answer 2 · 2017-06-13T15:53:39.397

0

Maybe its the disabled="disabled" you're trying to achieve? If you add this to the first option, by default this changes the colour to grey.

edited Jun 13 '17 at 15:53

answered Jun 13 '17 at 15:34

Alex

8,875
2
27
44

The user wants to change the colour of the first item "Select a Country". This doesn't disable the entire select box, just this first item. The question wasn't clear as to why they want to change the colour. – Alex Jun 13 '17 at 15:42
Phew, I feel much better now i've had a dressing down by you, thanks. – Alex Jun 13 '17 at 15:45
I thought I was helping. I generally want my [so] answers to be correct and assumed the same. I do apologize. – tao Jun 13 '17 at 15:47
Just a thought, since the first option was set to no value, then it's good to disable it so it looks like a placeholder. – claudios Jun 13 '17 at 15:51

Belder · Answer 3 · 2017-06-13T16:24:17.703

0

I think this will work as a pure CSS solution (although I'm not sure if you really need to add the !important part but that will depend on your project):

select:not(:-internal-list-box) {
  color: #AFBAC7 !important;
}

option {
  color: black !important;
}

I made a fiddle HERE.

You can read about the :not css selector HERE.

Also, you may want to add additional classes to these elements to make the styling unique to this dropdown menu.

edited Jun 13 '17 at 16:24

answered Jun 13 '17 at 15:55

Belder

768
1
10
17

In Chrome it remains gray even when I select a proper country, Brandon. – tao Jun 13 '17 at 16:25
Ahh... I understood that they wanted to keep whatever was in the input box grey. Hmm...there must be a fix to this... – Belder Jun 13 '17 at 16:30

score 0 · Answer 4 · answered Jun 13 '17 at 16:20

If I understand you correctly;this is simple via jquery . . . :D

1) adding this script in document's Ready :

    $(function () {

    // first run
    $("select").each(function () {
        checkSelect($(this));
    });

    // after change
    $(document).on("change", "select", function () {
        checkSelect($(this));
    });

    function checkSelect($el) {
        $el.find("option:selected").index() == 0 ? $el.addClass("placeholder") : $el.removeClass("placeholder");
    }

})

2) adding style into your page:

    select.placeholder,
    select.placeholder option:first-child {
        color: #AFBAC7 !important;
    }

    select option {
        color: #333;
    }

https://jsfiddle.net/jj89198103/yw6xe1kv/

How do I set the fiirst select option to be gray even when the dropdown is closed

4 Answers4