web-dev-qa-db-fra.com

Je veux changer l'icône de sélection/icône déroulante en (fa-chevron-down). Comment puis-je?

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>

htmlcsshtml5twitter-bootstrapfont-awesome
7
Mo-Alanteh

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>

10
Woodrow Barlow

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.

1
Tripesdeporc

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

1
Ilídio Martins