Changing color of placeholder in dropdown

Question

You can see the form I'm working on here:

http://www.escalateinternet.com/free-quote.php

This is the code for the drop down budget:

            <td><select id="budget" style="width:420px;">
                <option value="">Choose Your Budget</option>
                <option value="250">$250-$500 Per Month</option>
                <option value="500">$500-$750 Per Month</option>
                <option value="750">$750-$1000 Per Month</option>
                <option value="100">$1000-$1500 Per Month</option>
                <option value="1500">$1500-$2500 Per Month</option>
                <option value="2500">$2500-$5000 Per Month</option>
                <option value="5000">$5000-$7500 Per Month</option>
                <option value="7500">$7500-$10000 Per Month</option>
                <option value="10000">$10,000 or More Per Month</option>
            </select></td>

How can I make it so that "Choose Your Budget" is the same gray colored text as the rest of the placeholders are by default and then when a budget is selected that text is the darker color. I'm just trying to basically make it match the color scheme the rest of the form is using...

score 10 · Answer 1 · edited May 23 '17 at 12:09

10

Possible duplicate of How do I make a placeholder for a 'select' box?

The short of it is, select elements don't support placeholders and what you want to do isn't quite achievable in css. However; some simple JS can help us here.

(I'm assuming you'll using jQuery)

$(document).ready(function(){
    $('select').on('change', function(){ //attach event handler to select's change event. 
                                        //use a more specific selector

        if ($(this).val() === ""){ //checking to see which option has been picked

            $(this).addClass('unselected'); 
        } else {                   // add or remove class accordingly
            $(this).removeClass('unselected');
        }

    });
});

Bonus edit: the if/else block can be refactored into one line (see jquery .toggleClass()) :

$(this).toggleClass('unselected', $(this).val() === "");

I'd also advise giving it the disabled attribute. You can then add styles like this:

select{
    color: black;
}
select.unselected{
    color: gray;
}
//edit: you might want to do this to make it that bit nicer:
select option:first-child{
    display: none;
}

don't forget to give the select element an initial class of unselected.

hope this helps!

edited May 23 '17 at 12:09

Community

1
1

answered Feb 08 '14 at 22:51

Bill

3,478
23
42

-1 for Javascript when there is no JS tag and jQuery when there is no jQ tag. – bjb568 Feb 08 '14 at 23:57
11

How is the asker supposed to know he should tag JavaScript when he doesn't know that he will need to use JavaScript? – Bill Feb 09 '14 at 01:28
Furthermore, there was no possible solution using HTML or CSS, as I explained at the beginning of my answer, and so I offered a possible solution using JavaScript. @bjb568 – Bill Feb 09 '14 at 01:30
I have been looking for a way to do this in CSS for awhile. I have resorted to javascript and this seems the best solution. @Billy I'd like to amend, `if ($(this).val() == "0")` to `if ($(this).val() == "")` and ` – Bradmage Jun 30 '15 at 12:31
Thanks @BradleyForster I have edited your suggestion into the answer (Along with another small improvement). – Bill Jun 30 '15 at 16:17
This helped me a lot, I place the class "unselected" on my – magorich Jul 26 '16 at 18:24
Added a pure JavaScript way in the comments. Not sure if it is still relevant. – Nicholas Sep 25 '18 at 09:48

score 3 · Answer 2 · answered Jul 30 '19 at 21:23

Here's how I did it with the placeholder text color being light gray, normal text white, and background black. The selected option will still be white after focus is moved away.

select {
    color: #fff!important;
    background-color: #000!important;
}
select:invalid {
    color: #535353!important;
}
select:focus {
    color: #fff!important;
}

score 1 · Answer 3 · answered Dec 19 '16 at 18:28

Simple way of doing this without using jQuery.

    select {
            color: #aaa; /* default unselected color */
    }

    select:focus {
            color: red; /* color when focused */
    }

    #budget option:checked{
            color: red; /* color when selected but not focused */
    }

score 1 · Answer 4 · answered Dec 04 '18 at 00:36

If the dropdown is a required field, you can use the :invalid pseudo-class. According to MDN:

The :invalid CSS pseudo-class represents any <input> or other <form> element whose contents fail to validate.

This means that when the selected option's value is blank (i.e. value=""), the :invalid pseudo-class selector will be active on the <select> element because a value is required. See my example below:

/* 1 - Disable default browser styling */
select {
  border: 1px solid #999;
}

/* 2 - Style default state using the :invalid pseudo-class */
select:invalid {
  color: red;
}

<select name="color" required>
  <option value="" selected>Select a size</option>
  <option value="sm">Small</option>
  <option value="md">Medium</option>
  <option value="lg">Large</option>
</select>

Nicholas · Answer 5 · 2018-09-25T10:04:39.480

Here is a pure JavaScript way (based on Bill's answer), as there is still no pure html/css way to do this (that I know of).

EDIT: You could set the disabled property on the placeholder option but this is not supported by all browsers AND you can't style the select based on the options attributes.

[].forEach.call(document.querySelectorAll('select'), function(currentSelect) {
  // Trigger placeholder method for the first time
  updatePlaceholder(currentSelect);

  // Bind change event to every select that is found on the page. 
  currentSelect.addEventListener('change', function() {
    updatePlaceholder(this);
  });

});


function updatePlaceholder(select) {
  select.classList.toggle('unselected', !select[select.selectedIndex].value);
}

select.unselected {
  opacity: .5;
  filter: grayscale();
}

<select id="budget" style="width:420px;">
  <option value="">Choose Your Budget</option>
  <option value="250">$250-$500 Per Month</option>
  <option value="500">$500-$750 Per Month</option>
  <option value="750">$750-$1000 Per Month</option>
  <option value="100">$1000-$1500 Per Month</option>
  <option value="1500">$1500-$2500 Per Month</option>
  <option value="2500">$2500-$5000 Per Month</option>
  <option value="5000">$5000-$7500 Per Month</option>
  <option value="7500">$7500-$10000 Per Month</option>
  <option value="10000">$10,000 or More Per Month</option>
</select>

SaidbakR · Accepted Answer · 2020-08-12T00:25:05.367

-4

Notice:

After more than six years of the answer, in some browsers, this snippet is no longer run as expected. For example, in current FireFox versions. However, in Opera 70.0.3728.95, it still works.

You can use pseudo class option:checked

<style>
    #budget option:checked{
      color:red;
    }
  </style>

look at this demo: http://jsbin.com/gilip/1

edited Aug 12 '20 at 00:25

answered Feb 08 '14 at 22:45

SaidbakR

13,303
20
101
195

Where are you seeing red in your demo? – user3286482 Feb 09 '14 at 01:23
Click the dropdown and select a value, then click it again and you will see the previous selected item in red color. – SaidbakR Feb 09 '14 at 11:46
I don't know why down vote?! The demo is working fine, and the op set it to be correct answer?! – SaidbakR May 18 '16 at 11:44
I think because the original question was talking about `placeholder` color value. Like when you have `input:text` field and you set the placeholder color – Alexander Kucheryuk Apr 19 '21 at 14:09

Changing color of placeholder in dropdown

6 Answers6

Notice:

Linked