css去掉默认的下拉,实现用户自定义的下拉列表

时间:2023-04-22 13:26:56

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试模拟</title>
<style type="text/css">
select{
width: 200px;
height: 40px;
border: solid 1px red;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
}
select::-ms-expand{display: none;}
</style>
</head>
<body>
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>