'how to change the border colour of ng-select component to red?

The select component in my angular html template is displaying fine. However I want to display this component with a red border, currently it is displayed in grey color. I am not able to achieve this.

I'm using Angular 5

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

the custom css is defined in file and it is as follows

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


Solution 1:[1]

What you're probably looking for is called ::ng-deep*. check the documentation for further details. *be aware that it's in a deprecated state at the moment.

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

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

Solution 2:[2]

You can also override the SCSS variable in your styles.scss

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

Solution 3:[3]

I think is a problem realted to angular viewencapsulation and browser css specificy. I aslo seen that you use border: 1px solid black; and not red as you mentioned in the question.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

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

Solution 4:[4]

In your css you are targeting ".ng-select", have you tried targeting it as an element and not a class?

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

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

Solution 5:[5]

<ng-multiselect-dropdown #multiSelect [placeholder]="'Select Service'" [settings]="dropdownSettings" class="custom-dropdown"
  [data]="dropdownList">
</ng-multiselect-dropdown>

Provide a custom class e.g. custom-dropdown and then in your styles.scss override it, for example

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

Solution 6:[6]

add this style in css/scss file of your component. get more info

/* 
    go red when touched when touched
*/

/* Border Color */
.ng-select.ng-invalid.ng-touched .ng-select-container{
    border-color: red;
}

/* Arrow Color */
.ng-select.ng-invalid.ng-touched .ng-arrow-wrapper .ng-arrow{
    border-color: red transparent transparent
}
/* Placeholder Color */
.ng-select.ng-invalid.ng-touched .ng-select-container .ng-placeholder{
    color: red;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Stavm
Solution 2 aitorllj93
Solution 3 Cassian
Solution 4
Solution 5 Pang
Solution 6 Ahmed Ashour

Related Questions