Icon trong select css đẹp

**** HTML

<div class="select-wrap">

    <select name="customer_shipping_phuongxa" id="customer_shipping_phuongxa">

        <option value="">Chọn Phường / Xã</option>

    </select>

</div> 

**** CSS
.appline .select-wrap{

    position:relative;

    width:100%;

}

.appline .select-wrap select{

    -webkit-appearance:none;

    -moz-appearance:none;

    appearance:none;

    background:#fff;

    border:1px solid #d9d9d9;

    box-sizing:border-box;

    border-radius:16px !important;

    height:40px !important;

    width:100%;

    padding:5px 45px 5px 20px !important;

    transition:all .2s;

    font-size:14px;

    cursor:pointer;

}

.appline .select-wrap select::-ms-expand{

    display:none;

}

.appline .select-wrap:after{

    content:"";

    position:absolute;

    top:50%;

    right:18px;

    margin-top:-2px;

    width:0;

    height:0;

    border-style:solid;

    border-width:5px 4px 0 4px;

    border-color:#888 transparent transparent transparent;

    pointer-events:none;

}

Select không hiện mũi tên

 

**** CSS: 

-webkit-appearance: none;

Select CSS

 

**** HTML

<select name="txt_quanhuyen" class="form-control my-box-shadow sl-district" required="">

<option value="">Quận/Huyện</option>

</select>

****CSS

.sl-district {

    background: url(../images/Icon-material-district.png) 8px 10px, url(../images/caret-select.png) right 20px bottom 14px;

    background-repeat: no-repeat;

    text-indent: 18px;

    appearance: none;  // không hiện dropdown truyền thống

}

.my-box-shadow {

    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 16%);

}