Is it possible to change select empty color only with css

Question

<select>
  <option disabled selected>＝select＝</option>
  <option>1</option>
</select>

When the user sees 「＝select＝」, I want to the color is gray.
And when selected 「1」, the color is black like this image:

select { color: black; }

select:empty { color: gray; }
//invalid

Is it possible to change color only with css? Thanks!

Possible duplicate of [CSS :selected pseudo class similar to :checked, but for — Saurabh Mistry, Jun 28 '18 at 09:43
Thank you for your share, but I did't mean the option. I add a photo to help my expression... https://i.stack.imgur.com/9hcm9.png — c j, Jun 29 '18 at 01:14

score 0 · Accepted Answer · answered Jun 28 '18 at 12:17

You could use a function to change the class of the select element onchange:

var myselect = document.getElementById("select1");

function colourFunction() {
  var colour = myselect.options[myselect.selectedIndex].className;
  myselect.className = colour;
}

// Call function on load:
colourFunction();

.color_gray {
  color: gray;
}

.color_black {
  color: black;
}

<select id="select1" onchange="colourFunction()">
  <option disabled selected class='color_gray'>＝select＝</option>
  <option class='color_black'>1</option>
</select>

Note that I also used the colored classes on the option elements. But it's not mandatory.

Hope it helps.

Thank you! You are right. I Hope one day css can do this. – c j Jun 29 '18 at 01:27 — c j, Jun 29 '18 at 01:27

Is it possible to change select empty color only with css

1 Answers1