1
votes

comment changer la couleur de la bordure du composant ng-select en rouge?

Le composant de sélection dans mon modèle html angulaire s'affiche correctement. Cependant, je souhaite afficher ce composant avec une bordure rouge, actuellement il est affiché en gris. Je ne parviens pas à y parvenir.

J'utilise Angular 5

.ng-select.custom {
    min-height: 0px;
    max-width: 350px;
}
.ng-select.dropdown {
    border: 1px solid black;
}

le CSS personnalisé est défini dans le fichier et il se présente comme suit

<ng-select class="custom" [searchable]="true" formControlName="contactList" [items]="contactLists" 
     bindLabel="name" 
     placeholder="{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}" [compareWith]="compareResource">
</ng-select>

angular css bootstrap-4 angular-ngselect

9 commentaires

avez-vous essayé d'ajouter l'indicateur:! important au css ??

pourriez-vous détailler un peu plus s'il vous plaît. où devrait placer le! important .. merci

vous devriez placer! important comme ceci: .ng-select.custom {min-height: 0px! important; max-width: 350px! important; } .ng-select.dropdown {bordure: 1px rouge fixe! important; } au fait, je vous ai changé la dernière ligne, de «noir uni» à «rouge uni» parce que vous avez demandé une couleur rouge.

Pouvez-vous partager un violon de travail? Merci

Je ne peux pas parce que je ne sais pas comment votre code fonctionne, si vous pouvez nous partager un code fonctionnel. Ensuite, je peux vous aider à atteindre votre objectif.

comment puis-je partager. quels outils dois-je utiliser pour partager? est-ce que github est ok? @Alberto AM & Hassan Siddiqui .. merci beaucoup

J'ai partagé mon code ici github.com/prasanthmp500/mep.git . vérifier la fixation pbranchAide. les fichiers que vous recherchez sont src / app / vols / flight-form / flight-form-target-step / flight-f‌ orm-target-step.comp‌ onent.html (recherchez ng-select) et le css est src / app / Flights / flight-form / flight-form-target-step / flight-f‌ orm-target-step.comp‌ onent.scss ... merci beaucoup

@prasanth, vous pouvez utiliser un joli site Web appelé: stackblitz. Ce qui fournit un moyen simple de partager votre code.

@AlbertoAM en utilisant important m'a aidé à résoudre le problème ... merci beaucoup

5 Réponses :

0
votes

Dans votre css, vous ciblez ".ng-select", avez-vous essayé de le cibler comme un élément et non comme une classe?

 ng-select.custom {
     min-height: 0px;
     max-width: 350px;
 }

 ng-select.dropdown {
     border: 1px solid black;
 }

0 commentaires

0
votes

Je pense que c'est un problème lié à l'encapsulation angulaire de la vue et à la spécificité des navigateurs css. J'ai également vu que vous utilisiez border: 1px solid black; et non rouge comme vous l'avez mentionné dans la question.

https://developer.mozilla.org/en-US / docs / Web / CSS / Spécificité

https://dzone.com/articles/what-is-viewencapsulation -in-angulaire

0 commentaires

2
votes

Ce que vous recherchez probablement s'appelle :: ng-deep *. consultez la documentation pour plus de détails. * sachez qu'il est dans un état obsolète pour le moment.

::ng-deep .ng-select.custom {
        min-height: 0px;
        max-width: 350px;
}

::ng-deep .ng-select.dropdown {
    border: 1px solid black;
}

0 commentaires

1
votes

Vous pouvez également remplacer la variable SCSS dans votre styles.scss

$ng-select-highlight: #6200ee !default;
@import "~@ng-select/ng-select/scss/material.theme";

0 commentaires

0
votes

.custom-dropdown .multiselect-dropdown {
    position: relative;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #757575 !important;
    font-family: "Gilroy-SemiBold", "Arial", serif !important;
    .dropdown-btn {
        border: 1px solid #red !important;
    }
}

0 commentaires