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!