JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<select id="slct" onchange="change()" class="form-control">
  <option id="opt1" value="1">1</option>
  <option id="opt2" value="2">2</option>
  <option id="opt3" value="3">3</option>
  <option id="opt4" value="4">4</option>
  <option id="opt5" value="5">5</option>
</select>
<script>
function change(){
	var x = document.getElementById("slct").value;

  if(x > 1){
  	document.getElementById("slct").style.color = "black";
  }
  else{
  	document.getElementById("slct").style.color = "red";
  }
}
</script>

CSS

.form-control { 
   color: red;
}
option:nth-child(n + 2){
  color: black;
}