How can I change the "Select Month" option to color red just like a placeholder. But the options are black. I am using the hidden because it is used in my javascript. I only want to change the color of the default value
<select class="form-control"> <option value="" hidden="">Select Month</option> <option value="JAN">JAN</option> <option value="FEB">FEB</option> <option value="MAR">MAR</option> </select> You can do it with CSS property color: red, if you want to remove it when other value is selected go for the JS code below!
var element = document.getElementById('test'); element.addEventListener('change', () => { element.classList.add("touched"); });select.form-control { color: red; } select.form-control.touched { color: black; } select.form-control option { color: black; }<select class="form-control" id="test"> <option value="" hidden="">Select Month</option> <option value="JAN">JAN</option> <option value="FEB">FEB</option> <option value="MAR">MAR</option> </select>
You can't use color: red; on options just like that.
The way to go about doing it is to set an :invalid option. And for that to work, you have to set your <select> as required.
Try this:
select.form-control option{ color: black; } select.form-control:invalid { color: red; }<select class="form-control" required> <option value="" hidden="">Select Month</option> <option value="JAN">JAN</option> <option value="FEB">FEB</option> <option value="MAR">MAR</option> </select>ps: The only down side to this is that it makes this <select> a required feel. So if in your case, this is not a required field, then this answer is not going to work for you.
But a better solution will be to use jQuery and achieve this:
Solution 2
$(".form-control").change(function(){ var x = $( ".form-control option:selected" ).val(); if(x!="") { $("select").css("color","black"); } else { $("select").css("color","red"); } });select { color: red; } option { color: black; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form-control"> <option value="" hidden="">Select Month</option> <option value="JAN">JAN</option> <option value="FEB">FEB</option> <option value="MAR">MAR</option> </select>In this answer, you don't need to set this as a required field, just the way you wanted.
