How to customize css for ng-select in angular?

Question

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.

see this can help you. https://stackoverflow.com/questions/62782237/ng-select-style-group-headers-and-items/62782433#62782433 you can override style in `styles.css` — Avinash Dalvi, Jul 14 '20 at 10:42

score 4 · Answer 1 · answered Jul 14 '20 at 17:19

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

How to customize css for ng-select in angular?

1 Answers1