CSS實現下拉菜單添加倒三角完整html代碼

效果圖：

HTML：

<div class="select">
    <select name="select">
        <option>選項一</option>
        <option>選項二</option>
        <option>選項三</option>
        <option>選項四</option>
        <option>選項五</option>
        <option>選項六</option>
        <option>選項七</option>
    </select>
</div>

css：

.select {
    border:1px solid #e3e3e3;    
    border-radius:3px;
    color:#616263;
    overflow: hidden; 
    height: 40px;    
    width: 240px;
    position: relative;
    display: block;
}

select{       
    height: 40px;
    padding: 5px;
    background-color:#ececec;
    border: 0;
    outline: none;
    font-size: 16px;       
    width: 240px;
   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.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;   
}