Style de Select2 menu déroulant, sélectionnez boîtes

Je suis en utilisant Select2 dans un projet pour le style de certains des cases dans un formulaire de recherche. J'ai réussi à changer l'arrière-plan dégradé de la flèche conteneur noir dégradé:

.select2-container .select2-choice .select2-arrow {
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
}

Je voudrais la flèche blanche, mais malheureusement Select2 est à l'aide d'une image d'arrière-plan pour les différentes icônes au lieu de font-awesome ou quelque chose de similaire, donc il n'y a aucun moyen de changer la couleur avec les CSS.

Quel serait le moyen le plus facile de faire de la flèche blanche au lieu de la valeur par défaut de gris? Dois-je vraiment remplacer le fond d'écran au format png (select2.png et select2x2.png) avec mon propre? Ou est-il une méthode plus simple?

J'ai une autre question est de savoir comment changer la hauteur de la sélection de boîtes. Je sais comment changer la hauteur de la zone de liste déroulante dans l'état ouvert, mais je veux changer la hauteur de la selectbox en état fermé. Des idées?

Pour la deuxième question, regarde ici : stackoverflow.com/questions/2547354/...
La façon la plus simple de changer la couleur de l'arrière-plan de l'image serait d'utiliser votre propre image, oui

OriginalL'auteur Ruben | 2014-06-22

css jquery-select2

Merci pour les suggestions dans les commentaires. J'ai fait un peu un sale hack pour obtenir ce que je veux sans avoir à créer ma propre image. Avec le javascript j'ai d'abord cacher la balise par défaut qui est utilisé pour la flèche vers le bas, comme suit:

$('b[role="presentation"]').hide();

J'ai alors compris font-awesome dans ma page et ajouter mes propres flèche vers le bas, encore une fois avec une ligne de javascript, pour remplacer celui par défaut:

$('.select2-arrow').append('<i class="fa fa-angle-down"></i>');

Puis avec CSS je style de l'sélectionnez les cases. J'ai réglé la hauteur, changer la couleur d'arrière-plan de la zone de la flèche à un dégradé de noir, de modifier la largeur, la taille de police et aussi la couleur de la flèche vers le bas à blanc:

.select2-container .select2-choice {
    padding: 5px 10px;
    height: 40px;
    width: 132px; 
    font-size: 1.2em;  
}

.select2-container .select2-choice .select2-arrow {
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
    width: 40px;
    color: #fff;
    font-size: 1.3em;
    padding: 4px 12px;
}

Le résultat est le style de la façon dont je le veux:

Style de Select2 menu déroulant, sélectionnez boîtes

Mise à jour 5/6/2015
@Katie Lacy mentionné dans la réponse à l'noms de classe ont été modifiés dans la version 4 de Select2. La mise à jour de CSS avec les nouveaux noms de classe devrait ressembler à ceci:

.select2-container--default .select2-selection--single{
    padding:6px;
    height: 37px;
    width: 148px; 
    font-size: 1.2em;  
    position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
    width: 40px;
    color: #fff;
    font-size: 1.3em;
    padding: 4px 12px;
    height: 27px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;
}

JS:

$('b[role="presentation"]').hide();
$('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');

Je n'arrive pas à obtenir que cela fonctionne, pourriez-vous essayer de poster une vis par exemple, s'il vous plaît? Merci.
Important de mentionner que les noms de classes ont été modifiés dans la version 4, l'autre réponse, mais cette logique fonctionne toujours.

OriginalL'auteur Ruben

Voici un exemple de ci-dessus. http://jsfiddle.net/z7L6m2sc/
Maintenant select2 a été mis à jour les classes ont changer peut-être la raison pour laquelle vous ne pouvez pas le faire fonctionner. Voici le css....

.select2-dropdown.select2-dropdown--below{
    width: 148px !important;
}

.select2-container--default .select2-selection--single{
    padding:6px;
    height: 37px;
    width: 148px; 
    font-size: 1.2em;  
    position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
    width: 40px;
    color: #fff;
    font-size: 1.3em;
    padding: 4px 12px;
    height: 27px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;
}

OriginalL'auteur Katie

3

C'est de cette façon que j'ai changé espace réservé flèche de couleur, les 2 classes sont pour déroulante ouvrir et déroulante fermé, vous avez besoin de changer la #fff de la couleur que vous voulez:
```
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #fff transparent !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent !important;
  }
```
Bien que ce n'est qu'une réponse partielle à la question, votre solution était parfait pour moi et pour tout le monde qui a besoin que de changer la couleur d'une flèche pour le match de style de la page. Merci pour les styles.

OriginalL'auteur lucasumberto

Vous devez vous connecter pour publier un commentaire.