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. stackoverflow.com/questions/62782237/… you can override style in styles.css — Avinash Dalvi
– Avinash Dalvi, Commented Jul 14, 2020 at 10:42

Saransh Dhyani · Accepted Answer · 2020-07-14 17:19:33Z

5

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

answered Jul 14, 2020 at 17:19

Saransh Dhyani

4154 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to customize css for ng-select in angular?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related