1. 程式人生 > >CSS自定義select選擇框樣式(右側下拉箭頭)

CSS自定義select選擇框樣式(右側下拉箭頭)

如圖:自定義select的箭頭樣式

 HTML以及CSS程式碼如下:

<select class="form_select">
    <option value="0">請選擇</option>
    <option value="1">aaaaa</option>
    <option value="2">bbbbb</option>
</select>
.form_select {
    /* 清除預設邊框 */
    border: 0;
    /* 清除預設的箭頭樣式 */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /* 右側新增小箭頭的背景圖 */
    background: url('../../img/select_arrow.png') 230px center no-repeat;
    background-size: 12px;
}