<select name="abc">
<option value="0" selected>未完成</option>
<option value="1" >已完成</option>
</select>
我想未完成显示为红色，已完成显示黑色，怎么实现？
得写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";
}
});
自己写一个呗。原生的不好改
如果是写死的就简单了，如果是按后台数据返回生成的，可以给不同的显示数据设置不同的css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直选项栏</title>
<style>
.no-finish {
color: red;
}
finish {
color: black;
}
</style>
</head>
<body>
<select name="abc">
<option class="no-finish" value="0" selected>未完成</option>
<option class="finish" value="1">已完成</option>
<option class="no-finish" value="2">未完成</option>
<option class="finish" value="3">已完成</option>
<option class="no-finish" value="4">未完成</option>
<option class="finish" value="5">已完成</option>
</select>
</body>
</html>