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...

Answer 1

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

Answer 2

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!

Answer 3

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>