how to change css when ng-select is used?

Question

I am currently using ng-select for drop down like

<ng-select [items]="tests"
           (data)="signalChanged($event)"
           [active]="test"
           id="test)">
</ng-select>

I want to change the back ground color of the active element in the drop down list. How do I access it's css?

Answer 1

You can customize as per official documentation. To find exact class you need to override, do inspect and identify the class.

<ng-select class="custom"></ng-select>
.ng-select.custom {
    border:0px;
    min-height: 0px;
    border-radius: 0;
}
.ng-select.custom .ng-select-container  {            
    min-height: 0px;
    border-radius: 0;
}

If you are using ViewEncapsulation, your should use special ::ng-deep selector which will prevent scoping for nested selectors.

.ng-select.custom ::ng-deep .ng-select-container  {            
    min-height: 0px;
    border-radius: 0;
}

https://www.npmjs.com/package/@ng-select/ng-select#custom-styles has more details around the same.

Answer 2

I suggest you override the styles as mentioned here. In addition to that try setting the Encapsulation for the component.

encapsulation: ViewEncapsulation.None