How to add custom arrows in select options

Date: Posted by: Karthick In: HTML

<style>
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-repeat:no-repeat;
    background-image: url('../img/select.svg') ;
    background-position: right center;
    background-size: 18px;
    background-origin: content-box;
}
select::-ms-expand {
    display: none;
}
</style>
 
<select id="select" name="select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

137 Views

Top