css
.select {
border: 1px solid #bdb2b2;
border-radius: 10px;
/*清除select聚焦时候的边框颜色*/
outline: none;
/*设置select的宽高*/
width: 200px;
height: 40px;
line-height: 40px;
/*隐藏select的下拉图标*/
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/*通过padding-left的值让文字处于合适位置*/
padding-left: 20px;
/* 设置下拉图标 */
background: url("1.jpg") no-repeat right center transparent;
}
html
<select class="select">
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
option是html固有元素;无论怎么修改都是不起作用的。
想修改option样式,只能通过divulli重写下拉框效果 如下图 具体需求可以自己再次进行更改
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义select</title>
</head>
<style>
.choose {
padding: 8px 5px;
width: 210px;
outline: none;
border: 1px solid rebeccapurple;
border-radius: 5px;
}
.option {
display: none;
width: 180px;
padding: 5px 10px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #e2b5b5;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
</style>
<body>
<input class="choose" type="text" placeholder="请输入" readonly="readonly">
<div class="option">
<ul>
<li class="question">11</li>
<li class="question">22</li>
<li class="question">33</li>
</ul>
</body>
<script>
var choose = document.getElementsByClassName('choose')
var option = document.getElementsByClassName('option')
var question = document.getElementsByClassName('question')
choose[0].addEventListener('click', function () {
option[0].style.display = 'block'
})
for (var i = 0; i < question.length; i++) {
question[i].addEventListener('click', function () {
console.log(this.innerHTML);
if (this.innerHTML === '33') {
// 对于不能点击的选项
alert('无效选项')
} else {
choose[0].value = this.innerHTML //获取dom的文本
option[0].style.display = 'none'
}
})
}
</script>
</html>
效果如图