How To Change Bootstrap Select Arrows To Glyphicon?

I want to achieve something like this, except arrow should be bootstrap glyphicon icon: I really don't know how to make this using bootstrap. I was trying to do this like this: &l

Solution 1:

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: '';
}

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