CODEWITHSUNDEEP
cssangularangular-ngselect
Laxmee
Laxmee

Reputation: 47

How to customize css for ng-select in angular?

I am trying to customize the css of ng-select using default view encapsulation. I am using ::ng-deep for this.

This section seems to work:

 .ng-select.custom-ng-select ::ng-deep {
          //this section works//
                 &.ng-select-container {
                        border: 1px solid #1CBC88;
                        color: #1CBC88 !important;
                        box-shadow: none;
                        font-size: 13px !important;
                        font-weight: bold;   }

However, the section below doesnot work:

                   &.ng-select-opened {
                    &.ng-select-bottom {
                        >.ng-select-container {
                            border-bottom: 1px solid red;
                        }
                    }
                   }

}

I want to change the bottom border color when the select is opened by using ::ng-deep selector on ng-select. Thanks.

Upvotes: 2

Views: 15011

Answers (1)

Saransh Dhyani
Saransh Dhyani

Reputation: 405

Brother, you can add this CSS to your component.scss file

::ng-deep.ng-select-container {
        border-bottom: 1px solid red !important;
     }

And you can also add like this globally in styles.scss

.ng-select-container {
        border-bottom: 1px solid red !important;
     }

Upvotes: 4

Related Questions