如何将自举选择箭头更改为glyphicon？ [英] How to change bootstrap select arrows to glyphicon?

问题描述

我想达到这样的效果，除了箭头应该是bootstrap glyphicon icon：

我真的不知道如何使用bootstrap来做这件事。
我试图这样做：

 < div class =my-select> 
< div class =select-side> 
< i class =glyphicon glyphicon-menu-down>< / i> 
< / div> 
< select class =form-controlid =sel1> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< / select> 
< / div> 
  

通过在我的选择中将选择方设置为绝对并操作它，但无论多么困难我尝试，我无法适应这个蓝色的div与边界下全选。当你点击那个箭头时，它不起作用。

现在唯一的问题是点击select-side div不会打开面板。 / p>

编辑2：解决问题，工作演示：

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

解决方案

div>

只添加 pointer-events：none; 到 .select-side 。这可以防止在 div 中的鼠标事件，并且您在后面的选择中点击：

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

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:

<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

解决方案

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

这篇关于如何将自举选择箭头更改为glyphicon？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！