Changing color of placeholder in dropdown

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

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!