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
.
<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>
Here's a solution that uses font-awesome's fa-chevron-down
natively (without using an image). It does require that you add a font-awesome tag to your markup, but it's fairly clean.
/* 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With