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?
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.
I suggest you override the styles as mentioned here. In addition to that try setting the Encapsulation for the component.
encapsulation: ViewEncapsulation.None
Taken from ng-select Documentation page
The backgrond color and text color of the highlighted option in the drop-down can be changed using the highlightColor and highlightTextColor properties, as shown in the following example. Single select
Component template
<ng-select highlightColor="#9575cd" highlightTextColor="#fff" [options]="characters"> </ng-select>Multiple select
Component template
<ng-select highlightColor="#9575cd" highlightTextColor="#fff" [options]="characters" [multiple]="true"> </ng-select>
