Je veux utiliser un formulaire comme dans le code est de bootstrap mais je veux changer l'icône de sélection/icône déroulante à 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>
Voici une solution qui utilise fa-chevron-down
en natif (sans utiliser d'image) de font-awesome. Cela nécessite que vous ajoutiez une balise font-awesome à votre balisage, mais c'est assez propre.
/* 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>
Vous devez ajouter un fichier CSS (que vous liez dans l'en-tête de la page) et spécifier pour cette classe une image d'arrière-plan:
.row > .col-sm-6 > form-group > .form-control-input-lg
{
background: url(images/example.gif) no-repeat scroll 0px 0px;
padding-left:0px;
}
Ce css ajoutera un arrière-plan à votre image et ensuite, il ne vous restera plus qu'à modifier le remplissage et la position de l'arrière-plan par ceux que vous souhaitez avoir le glyphicon sous votre contrôle.
Ceci est une solution basée sur la solution ci-dessus (Woodrow Barlow), avec de légères améliorations
/* 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>
Compatibilité du navigateur Safari 5.1.7 | IE9 | Firefox | Google Chrome
Remarque Dans IE9, la flèche est devant