how to customize dropdown select controls

mikha used Ask the Experts™
example contrived for this question. I have a dropdown select control as such in my HTML page. I want to give it a slicker look.
for example, at the end of the dropdown, there is an downward arrow.
if i want to change the size, or use a different icon for the downward arrow. How can I do that?

or do i use bootstrap , to create such control. but still I don't know how would i change such icon?

<!DOCTYPE html>

<div class="newdropdown">
    <option value="abc">abc</option>
    <option value="ijk">ijk</option>
    <option value="pqr">pqr</option>
    <option value="xyz">xyz</option>
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David S.Consultant & Challenge Subduer
Top Expert 2009

It's rather complicated to do that for multiple versions of multiple browsers. These show the techniques:
Most Valuable Expert 2017
Distinguished Expert 2018
There are various techniques for achieving this.

1. You position an image over the dropdown button - not ideal but it sort of works
2. You create a pseudo select. You hide the actual select and display using your own markup <ul> or <div> which you style as required.

If you are using bootstrap then the Bootstrap Select plugin gives you some good options. (

I would use Select2 this is easy to customize 
plus there is a Bootstrap theme

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial