前言
在使用select时候原生默认样式很难修改特别是option的样式和鼠标经过option时候的样式改变很难覆盖,能力不足尚未实现,暂且记录后续解决,现自己写一个选择的效果
DOM
<div class="selectBox">
<div class="select"><span class="selectText">商机</span><img src="down.png" alt=""></div>
<ul class="selectOption">
<li class="selectOption1">商机</li>
<li class="selectOption2">采购商</li>
</ul>
</div>
css
.selectBox{
width: 90px;
}
.select{
width: 90px;
background-color: #17a6b5;
height: 40px;
/* position: relative;
text-align: center;
line-height: 40px;*/
cursor: pointer;
display: flex;
justify-content:center;
align-items:center;
border-radius: 3px;
}
.select img{
width: 20px;
/* position: absolute;
top: 10px;*/
cursor: pointer;
}
.selectOption{
background-color: #666666;
width: 80px;
list-style: none;
padding-left: 0;
margin-top: 0;
display: none;
}
.selectOption li{
width: 100%;
color: #ffffff;
text-align: center;
cursor: pointer;
}
.selectOption li:hover{
background-color: #17a6b5
}
JS
var selectBox = document.getElementsByClassName('selectBox')[0];
var Select = document.getElementsByClassName('select')[0];
var selectText = document.getElementsByClassName('selectText')[0];
var option = document.getElementsByClassName('selectOption')[0];
var option1 = document.getElementsByClassName('selectOption1')[0];
var option2 = document.getElementsByClassName('selectOption2')[0];
// 点击select
Select.onclick = function(){
option.style.display = 'block'
}
// 鼠标移除
selectBox.onmouseleave = function(){
option.style.display = 'none'
}
option1.onclick = function(){
option.style.display = 'none'
selectText.innerHTML = '商机'
}
option2.onclick = function(){
option.style.display = 'none'
selectText.innerHTML = '采购商'
}
效果如下
样式丑陋有待修改