web-dev-qa-db-fra.com

Couleurs WooCommerce Pays Déroulant CSS

J'ai essayé de modifier les couleurs des pays sélectionnés et survolés dans la liste déroulante des pays sur la page de paiement d'un site Web que je suis en train de développer et qui est http://chi-medics.com/

Quoi que j'essaye dans les outils de développement Google Chrome, je n'arrive pas à trouver le CSS qui contrôle la couleur de ces éléments.

Pour voir ce que je veux dire, allez sur la page Web et ajoutez quelque chose au panier. Ensuite, allez à la caisse. Il s’agit du menu déroulant "Pays" où la couleur de survol est le bleu et le gris sélectionné.

Je veux changer cela mais pour la vie de moi ne peut pas le comprendre.

Toute aide est appréciée.

Merci,

1
Harvey

Cela fait partie de la bibliothèque " Select2 ", qui remplace jQuery pour certains champs. Vous trouverez la feuille de style dans /assets/css/select2.css dans le dossier du plugin WooCommerce.

Vous trouverez ci-dessous les définitions de propriété que vous trouverez par défaut pour chacun des éléments que vous avez mentionnés.

Tout d'abord, la valeur sélectionnée:

.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[data-selected=true] {
    background-color:#ddd
}

Deuxièmement, la valeur de survol:

.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color:#0073aa;
    color:#fff
}

Comme elles font partie d'une bibliothèque incluse dans le plug-in, si vous souhaitez les remplacer, il est préférable de le faire en chargeant votre propre feuille de style entièrement personnalisée ou en dehors de celui-ci. Le plus simple serait d’utiliser le WP Customizer.

Lorsque vous êtes connecté, dans la WP Toolbar (barre d’outils) (en haut de l’écran), sélectionnez "Personnaliser". Lorsque le personnaliseur s'ouvre, sélectionnez "CSS supplémentaire". Ajoutez les propriétés ci-dessus et définissez la couleur d'arrière-plan et la couleur de la police (simplement "couleur") en conséquence. Cliquez sur "Publier" et vos stlyes personnalisés se chargeront en ligne.

1
butlerblog