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

Question

我希望实现类似的功能，除了箭头应该是bootstrap glyphicon icon：

我真的不知道如何使用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不会打开面板。

EDIT2：解决了问题，工作演示：

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