web-dev-qa-db-fra.com

Style des zones de sélection déroulantes Select2

J'utilise Select2 dans un projet pour styliser certaines zones de sélection dans un formulaire de recherche. J'ai réussi à changer l'arrière-plan dégradé du conteneur de flèche en un dégradé noir:

.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);
}

J'aimerais que la flèche soit blanche, mais malheureusement Select2 utilise une image d'arrière-plan pour les différentes icônes au lieu de police génial ou quelque chose de similaire, donc il n'y a aucun moyen de simplement changer la couleur avec CSS.

Quelle serait la façon la plus simple de rendre la flèche blanche au lieu du gris par défaut? Dois-je vraiment remplacer le png d'arrière-plan (select2.png et select2x2.png) par le mien? Ou existe-t-il une méthode plus simple?

Une autre question que j'ai est de savoir comment modifier la hauteur des cases de sélection. Je sais comment modifier la hauteur de la liste déroulante à l'état ouvert, mais je veux modifier la hauteur de la boîte de sélection à l'état fermé. Des idées?

cssjquery-select2
17
Ruben

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

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

J'ai ensuite inclus font-awesome dans ma page et ajouté ma propre flèche vers le bas, toujours avec une ligne de javascript, pour remplacer celle par défaut:

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

Ensuite, avec CSS, je stylise les cases de sélection. Je règle la hauteur, change la couleur d'arrière-plan de la zone de la flèche en noir dégradé, change la largeur, la taille de la police et également la couleur de la flèche vers le bas en 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 que je veux:

screenshot

Mise à jour 5/6/2015 Comme @Katie Lacy l'a mentionné dans l'autre réponse, les noms de classe ont été modifiés dans la version 4 de Select2. Le CSS mis à jour 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>');
34
Ruben

Voici un exemple de travail ci-dessus. http://jsfiddle.net/z7L6m2sc/ Maintenant que select2 a été mis à jour, les classes ont changé 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;
}
8
Katie

Voici comment j'ai changé la couleur de la flèche de l'espace réservé, les 2 classes sont pour le menu déroulant ouvert et le menu déroulant fermé, vous devez changer le #fff à 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;
  }
4
lucasumberto