CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tomasz Szymanek
Tomasz Szymanek

Reputation: 499

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>
  </div>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

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.

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

EDIT2: Problem Solved, WORKING DEMO:

http://codepen.io/Deathgazeroo/pen/wWWMqJ

Upvotes: 7

Views: 40499

Answers (2)

Mohit Shah
Mohit Shah

Reputation: 188

You can achieve it by using .input-group and .input-group-addon classes of bootstrap. You can hide down arrow by using below css code in your stylesheet. Below is the code snippet :

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}
<div class="input-group">

  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <span class="input-group-btn"><i class="glyphicon glyphicon-menu-down"></i></span>
</div>

Upvotes: 9

user4994625
user4994625

Reputation:

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

http://codepen.io/blonfu/pen/EyyPpJ

Upvotes: 3

Related Questions