我想使用代码中的表单来自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>
解决方法
这是一个本机使用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">...</select>
<i class="fa fa-chevron-down"></i>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">...</select>
<i class="fa fa-chevron-down"></i>
<label for="exampleInputEmail1">Some-text</label>
<select class="form-control input-lg">...</select>
<i class="fa fa-chevron-down"></i>
</div>
</div>
</div>
</div>
