Html 如何将引导程序选择箭头更改为 glyphicon？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37833573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change bootstrap select arrows to glyphicon?
提问by Tomasz Szymanek
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.
通过在 my-select 上将 select-side 设置为绝对并对其进行操作，但无论我多么努力，我都无法在整个 select 下放置带有边框的蓝色 div。当你点击那个箭头时 - 它不起作用。
Only problem I have right now is that clicking on select-side div won't open panel.
我现在唯一的问题是单击选择侧 div 不会打开面板。
EDIT2: Problem Solved, WORKING DEMO:
EDIT2：问题解决，工作演示：
采纳答案by Mohit Shah
Only add pointer-events:none;to .select-side. This prevent mouse events in this divand you do click in the select behind:
只添加pointer-events:none;到.select-side. 这可以防止鼠标事件发生，div并且您在后面的选择中单击：
回答by Mohit Shah
You can achieve it by using .input-groupand .input-group-addonclasses of bootstrap. You can hide down arrow by using below css code in your stylesheet. Below is the code snippet :
您可以通过使用引导程序.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>