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