相信有些程序员都会遇到一些各种各样的需求,今天小编就遇到了一个奇怪的需求,这个是和select样式有关的!
相信很多开发的都遇到过一个情况,同样是select下拉选择框,ios系统的和windows系统显示的样式就是不一样,同样的select在ios的系统的显示作用下是双三角形的下拉选择,但是到windows确实单三角形的选择(小编也承认是双三角形的选择看起来bg高),今天小编自己写了个双三角形的样式的select下拉选择框!
接下来是代码:(这是硬写的样式,大家能找到组件直接用当然是最好的了!小编因为没找到对应的组件所以才硬写了!)
<!DOCTYPE html>
<html>
<style>
.ss{
width:100%;
height:40px;
line-height:40px;
border: solid 1px #000;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
select::-ms-expand { display: none; }
.aa{
float:right;
z-index:999;
height:14px;
line-height:14px;
position:relative;
margin-top:-27px;
margin-right:10px;
}
.mm{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.bb{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
margin-top:4px;
}
</style>
<body>
<select name="cars" class="ss">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div class="aa">
<div class="mm"></div>
<div class="bb"></div>
</div>
</body>
</html>
希望能帮到大家!
