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

Je veux utiliser une forme comme dans le code de bootstrap, mais je veux changer l'icône sélectionner/déroulante de l'icône de fa-chevron-down.

HTML:

<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>

Ne pas vous dire case?

InformationsquelleAutor Mo-Alanteh | 2015-06-04

Voici une solution qui utilise font-awesome est fa-chevron-bas nativement (sans l'aide d'une image). Il ne nécessite que vous l'ajouter à la police-génial tag à votre balisage, mais c'est assez propre.

CSS:

/* 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;
}

HTML:

<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>

je viens de réaliser que cette solution ne vous empêche de cliquer sur le chevron pour sélectionner la liste. je suis à jour de ma réponse pour résoudre ce problème.
C'est immonde et il semble que je l'aime, d'ailleurs il est bien sûr également possible sans Bootstrap et d'origine.
eh bien, le "sale" trucs (à l'aide d'un fond blanc pour couvrir le natif de flèche) est nécessaire uniquement pour internet explorer / edge.
Qu'est-ce que form-control? Pourquoi faire cette réponse complètement dépendant de bootstrap?
parce que la question a demandé spécifiquement la façon d'accomplir ceci dans le bootstrap.

InformationsquelleAutor Woodrow Barlow

1

Vous devez ajouter un fichier CSS (lien dans le head de la page) et de préciser, pour cette classe d'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;
}
```
Cette css wil ajouter un arrière-plan de votre image et après vous n'avez qu'à modifier le rembourrage et la position de l'arrière-plan par celles que vous voulez avoir le glyphicon dans votre contrôle.
- Cela ne répond pas à répondre à la question..
InformationsquelleAutor Tripesdeporc

C'est une solution basée dans la solution ci-dessus (Woodrow Barlow), avec de légères améliorations

CSS:

    /* 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;
   }

HTML:

<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>

Navigateur compatibilité
Safari 5.1.7 | IE9 | Firefox | Google Chrome

Note
Dans IE9 fa flèche est en face

La façon de se débarrasser de la dépendance sur bootstrap?

InformationsquelleAutor Ilídio Martins

Vous devez vous connecter pour publier un commentaire.