html下拉框如何根据值的不同显示不同的颜色。

Question

<select name="abc">
 <option value="0" selected>未完成</option>
 <option value="1" >已完成</option>
</select>

我想未完成显示为红色，已完成显示黑色，怎么实现？

Answer 1

得写javaScript了。。。
let select = document.getElementsByTagName("select");

select[0].addEventListener("change",function(){
if(select[0].selectedIndex == 0)
{
select[0].style['background-color']='red';
}
else{
select[0].style['background-color']="black";
}
});