how to customize dropdown select controls

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>
<html>
<body>

<div class="newdropdown">
<select>
    <option value="abc">abc</option>
    <option value="ijk">ijk</option>
    <option value="pqr">pqr</option>
    <option value="xyz">xyz</option>
    </select>
</div>
</body>
</html>
mikha eAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
It's rather complicated to do that for multiple versions of multiple browsers. These show the techniques:

http://filamentgroup.github.io/select-css/demo/
http://cssdeck.com/labs/styling-select-box-with-css3
0
Julian HansenCommented:
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. (https://developer.snapappointments.com/bootstrap-select/)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lenamtlCommented:
Hi,

I would use Select2 this is easy to customize https://select2.org 
plus there is a Bootstrap theme https://github.com/select2/select2-bootstrap-theme
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.