Html 我想将选择图标/下拉图标更改为 (fa-chevron-down)。我怎样才能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30646923/
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
I want to change the select icon/dropdown icon to (fa-chevron-down). How can I?
提问by Mo-Alanteh
I want to use a form like in the code is from bootstrap but i want to change the select icon/dropdown icon to fa-chevron-down.
我想使用来自 bootstrap 的代码中的表单，但我想将选择图标/下拉图标更改为fa-chevron-down.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Heading</h2>
<div class="form-group">
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">...</select>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">...</select>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">...</select>
</div>
</div>
</div>
</div>回答by Woodrow Barlow
Here's a solution that uses font-awesome's fa-chevron-downnatively (without using an image). It does require that you add a font-awesome tag to your markup, but it's fairly clean.
这是一个原生使用 font-awesome 的解决方案fa-chevron-down（不使用图像）。它确实需要您在标记中添加一个字体很棒的标签，但它相当干净。
/* remove the original arrow */
select.input-lg {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
/* no standardized syntax available, no ie-friendly solution available */
}
select + i.fa {
float: right;
margin-top: -30px;
margin-right: 5px;
/* this is so when you click on the chevron, your click actually goes on the dropdown menu */
pointer-events: none;
/* everything after this is just to cover up the original arrow */
/* (for browsers that don't support the syntax used above) */
background-color: #fff;
padding-right: 5px;
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Heading</h2>
<div class="form-group">
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<i class="fa fa-chevron-down"></i>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<i class="fa fa-chevron-down"></i>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
</div>
</div>
</div>回答by Ilídio Martins
This is a solution based in the solution above (Woodrow Barlow), with light improvements
这是基于上述解决方案 (Woodrow Barlow) 的解决方案，具有轻微的改进
/* remove the original arrow */
select{
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-color: #92ceea!important;
}
select::-ms-expand {
display: none;
}
select + i.fa {
float: right;
margin-top: -26px;
margin-right: 10px;
/* this is so when you click on the chevron, your click actually goes on the dropdown menu */
pointer-events: none;
/* everything after this is just to cover up the original arrow */
/* (for browsers that don't support the syntax used above) */
background-color: transparent;
color:black!important;
padding-right: 5px;
}
select option{
padding-right: 21px;
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control">
<option value="">select_option</option>
<option value="1">Op??o1</option>
<option value="2">Op??o2</option>
</select>
<i class="fa fa-chevron-down"></i>Browser compabilitySafari 5.1.7 | IE9 | Firefox | Google Chrome
浏览器兼容性Safari 5.1.7 | IE9 | 火狐 | 谷歌浏览器
NoteIn IE9 fa arrow is in front
注意在 IE9 中 fa 箭头在前面
回答by Tripesdeporc
You have to add a CSS file (that you link in the head part of the page) and to specify for this class a background image :
您必须添加一个 CSS 文件（您在页面的头部链接）并为此类指定背景图像：
.row > .col-sm-6 > form-group > .form-control-input-lg
{
background: url(images/example.gif) no-repeat scroll 0px 0px;
padding-left:0px;
}
This css wil add a background with your image and after you only have to modify the padding and the position of the background by the ones you want to have the glyphicon in your control.
这个css将为您的图像添加背景，然后您只需修改填充和背景位置，即可让您的控件中包含字形。
