how to customize dropdown select controls

mikha
mikha used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

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

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
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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/)
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

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