利用css的content来改变select的样式，下箭头

一般的我们看到的没有加任何样式的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;   
}