一般的我们看到的没有加任何样式的select是这样de
<div class="select">
<select name="select">
<option>select</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
</select>
</div>
我们加点样式美化一下
.select select{
height: 40px;
width: 240px;
font-size:20px;
border-radius:3px;
}
变成但是这个箭头和放大的字体和框就格格不入了。
所以我想能不能修改那个箭头的大小呢?
.select select{
height: 40px;
width: 240px;
font-size:20px;
border-radius:3px;
// 让他不显示那个小箭头
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select{
position:relative;
display:block;
height: 40px;
width: 240px;
}
.select:after {
content:"▼"; //这里就是那个箭头啦
padding: 12px 8px;
position: absolute; right: 10px; top: 0;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}