css select (dropdown) custom styles

Solution for modern browsers and IE11:

html:

<select class="dropdown-styled">
    <option value="1">options 1</option>
    <option value="2">options 2</option>
    <option value="3">options 3</option>
</select>



<div class="dropdown-styled-wrap">
    <select>
        <option value="1">options 1</option>
        <option value="2">options 2</option>
        <option value="3">options 3</option>
    </select>
</div>

css:

.dropdown-styled {
    appearance: none;
    border: 1px solid #555;
    width: 80%;
    height: 34px;
    background: #eee url(https://via.placeholder.com/40x40) right center no-repeat;
}



.dropdown-styled-wrap {
    width: 80%;
    height: 34px;
    overflow: hidden;
    background: #eee url(https://via.placeholder.com/40x40) right center no-repeat;
    border: 1px solid #555;
}

.dropdown-styled-wrap select {
  appearance: none;
    background: transparent;
    width: 110%;
    height: 34px;
    border: 0;    
}

Or you may use chosen jquery dropdown replacement