CODEWITHSUNDEEP
cssangular
code1
code1

Reputation: 8989

how to change css when ng-select is used?

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?

Upvotes: 6

Views: 28556

Answers (3)

Chetan Laddha
Chetan Laddha

Reputation: 1007

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.

Upvotes: 11

James Poulose
James Poulose

Reputation: 3835

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

encapsulation: ViewEncapsulation.None

Upvotes: 1

Vega
Vega

Reputation: 28701

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>

Upvotes: 0

Related Questions