Заполнитель в типе select, измените CSS скрытого значения на select

Question

Как я могу изменить опцию "Select Month" на красный цвет как заполнитель. Но варианты черные. Я использую hidden, потому что он используется в моем javascript. Я только хочу изменить цвет значения по умолчанию

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

Answer 1

Это можно сделать с помощью свойства CSS color: red, если вы хотите удалить его, когда выбрано другое значение go для кода JS ниже!

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>

Answer 2

Вы не можете использовать color: red; для параметров просто так.

Способ go сделать это - установить параметр :invalid. И чтобы это работало, вы должны установить <select> как обязательно .

Попробуйте это:

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>

пс: Единственный минус в том, что это делает это <select> необходимым ощущением. Так что если в вашем случае это не обязательное поле, то этот ответ не сработает для вас.

Но лучшим решением будет использование jQuery и достижение этого :

Решение 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>

В этом ответе вам не нужно устанавливать это поле как обязательное , так, как вы хотели.