Style de la selectpicker version de Bootstrap sélectionnez

Je suis en train d'essayer, et à défaut, pour le style de bootstrap-sélectionnez widget. J'ai essayé le code suivant mais il ne change pas le fond et la couleur du texte dans la selectpicker boîte de sélection:

 <select id="what" class="wia-filter-value selectpicker show-tick">
     <option selected>All</option>
     <option>Events</option>
     <option>Man Made</option>
     <option>Nature</option>
 </select>

Mon CSS ressemble à ceci:

CSS:

select {
width: 200px;
height: 30px;
background-color: #141414 !important;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-size: 18px;
font-weight: 200;
padding-left: 6px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.selectpicker{
width: 200px;
height: 30px;
background-color: #141414 !important;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-size: 18px;
font-weight: 200;
padding-left: 6px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand { /* for IE 11 */
display: none;
}
.wia-filter-value {
width: 200px;
height: 30px;
background-color: #141414 !important;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-size: 18px;
font-weight: 200;
padding-left: 6px;
}

Cette CSS s'applique avec succès la gauche de la frontière de la couleur, mais ne pas appliquer la couleur d'arrière-plan ou la couleur du texte.

REMARQUE: La solution de montrer dans stackoverflow à entrez description du lien ici est pour la norme de Bootstrap sélectionner. Je suis l'aide de la selectpicker widget de https://silviomoreto.github.io/bootstrap-select. Cette solution ne semble pas fonctionner pour selectpicker, ou, au moins, je ne peux pas le faire fonctionner.

InformationsquelleAutor Bill Noble | 2016-12-04
  1. 5

    Vous avez besoin de cibler les Bootstrap-sélectionnez classes, le plugin est l'application. Si vous inspecter l'élément, vous pouvez voir ce qu'il se passe. Voici une capture d'écran pour la référence à ce qui est appliqué.

    Style de la selectpicker version de Bootstrap sélectionnez

    De Travail Exemple:

    CSS:

    body {
padding-top: 50px;
}
.bootstrap-select {
max-width: 200px;
}
.bootstrap-select .btn {
background-color: #141414;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-weight: 200;
padding: 12px 12px;
font-size: 16px;
margin-bottom: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.bootstrap-select .dropdown-menu {
margin: 15px 0 0;
}
select::-ms-expand {
/* for IE 11 */
display: none;
}

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<div class="container text-center">
<select id="what" class="form-control selectpicker show-tick">
<option selected>All</option>
<option>Events</option>
<option>Man Made</option>
<option>Nature</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    • Très utile de répondre. Grandement apprécié, merci.
    InformationsquelleAutor vanburen
  2. -1
    <div class="form-group">
<label class="control-label col-md-4">Theme White</label>
<div class="col-md-8">
<select class="form-control selectpicker" data-size="10" data-live-search="true" data-style="btn-white">
<option value="" selected>Select a Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
</select>
</div>
</div>

    Ajouter data-style="btn-white" de couleur blanc

    • btn-blanc ne semble pas être une valeur valide pour le data-style d'attribut, par la documentation developer.snapappointments.com/bootstrap-select/examples. À essayer de toute façon semble tourner à l'sélectionnez gris (couleur par défaut) au lieu de blanc.
    • C'est bizarre ce choix qu'ils ont fait pour le style comme un bouton à l'aide du bouton de classes et non pas comme une sélection. Le contrôle est nommé bootstrap-sélectionner.
    InformationsquelleAutor Jimmy Mendieta