Voglio cambiare l'icona di selezione/icona a discesa a (fa-chevron-down). Come posso?

Question

Voglio usare un modulo come nel codice è da bootstrap ma voglio cambiare l'icona di selezione/icona a discesa su 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>

Answer 1

Ecco una soluzione che utilizza font-awesome's fa-chevron-down in modo nativo (senza utilizzare un'immagine). È necessario aggiungere un tag font-awesome al markup, ma è abbastanza pulito.

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

Answer 2

è necessario aggiungere un file CSS (che si collega nella parte di testa della pagina) e per specificare per questa classe di un'immagine di sfondo:

.row > .col-sm-6 > form-group > .form-control-input-lg 
{ 
    background: url(images/example.gif) no-repeat scroll 0px 0px; 
    padding-left:0px; 
} 

Questo css wil aggiungi uno sfondo con la tua immagine e dopo devi solo modificare il padding e la posizione dello sfondo da quelli che vuoi avere il glyphicon nel tuo controllo.

Answer 3

Questa è una soluzione basata nella soluzione di cui sopra (Woodrow Barlow), con miglioramenti luce

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

Browser compability Safa ri 5.1.7 | IE9 | Firefox | Google Chrome

Nota In IE9 fa freccia si trova di fronte