html - I want to change the select icon/dropdown icon to (fa-chevron-down). How can I? -
i want use form in code bootstrap want change select icon/dropdown icon 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 solution uses font-awesome's fa-chevron-down
natively (without using image). require add font-awesome tag markup, it's clean.
/* remove 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; /* when click on chevron, click goes on dropdown menu */ pointer-events: none; /* after cover original arrow */ /* (for browsers don't support 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>
Comments
Post a Comment