如何将bootstrap选择箭头更改为glyphicon？

Question

我想实现这样的东西,除了箭头应该是bootstrap glyphicon图标:

我真的不知道如何使用bootstrap来制作它.我试图这样做:

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

通过在我的选择上设置选择方作为绝对并操纵它,但无论我怎么努力,我都不能在整个选择下适合这个带有边框的蓝色div.当你点击那个箭头时 - 它不起作用.

我现在唯一的问题是点击选择方div不会打开面板.

编辑2:解决问题,工作演示:

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

Answer 1

您可以通过使用引导程序.input-group和.input-group-addon类来实现它。您可以通过在样式表中使用以下 css 代码来隐藏向下箭头。下面是代码片段：

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>

Answer 2

仅添加pointer-events:none;到.select-side. 这可以防止鼠标事件发生，div并且您可以单击后面的选择：

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