Tomasz Szymanek Tomasz Szymanek -5 years ago 904
HTML Question

How to change bootstrap select arrows to glyphicon?

I want to achieve something like this, except arrow should be bootstrap glyphicon icon:

desired select menu

I really don't know how to make this using bootstrap.
I was trying to do this like this:

<div class="my-select">
<div class="select-side">
<i class="glyphicon glyphicon-menu-down"></i>
<select class="form-control" id="sel1">

by setting up select-side as absolute on my-select and manipulate it, but no matter how hard i try, i can't fit this blue div with border under whole select. AND when you click on that arrow- it doesn't work.

EDIT: demo:

Only problem I have right now is that clicking on select-side div won't open panel.

Answer Source

Only add pointer-events:none; to .select-side. This prevent mouse events in this div and you do click in the select behind:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download