cannot customize style of ng-select in Angular

[vugar005]

Hi. I try to change the style of (ng-select) . I paste the revised style to the component style where ng-select is located.

    ng-select > div {
      border: 0!important;
      outline: none;
    }
    ng-select > div > div.single > div.toggle {
      color: #2ebaee!important;
    }
    ng-select > div > div.single > div.placeholder {
      text-align: center;
    }
    select-dropdown > div .filter {
      display: none;
    }

But it does not work. I inspect element on developer tools and see no my revised style. Interesting is when I paste the style to Angular Global stlye.scss . It works but it does not suit my me because it overrides all ng-select in my project. How to achieve changing design of ng-select in component? Thanks in advance!

[krnlde]

Same issue here. This is due to the local scoped scss of the component which will always have a higher specificity than the global style definitions.

[vugar005]

solved this problem by adding a class to ng-select such as custom. Then in styles.scss

ng-select.custom > div { border: 0!important; outline: none; } ng-select.custom > div > div.single > div.toggle { color: #2ebaee!important; } ng-select.custom > div > div.single > div.placeholder { text-align: center; }

So again you need add those style to global styles.scss but this time it does not overwrite all ng-selects.

[fatmaPico]

i want to change the dropdown max-height. I did as you said :adding ng-select.select-dropdown > div .options { max-height: 100px; overflow-y: auto;
} to the style.scss but unfortunately it didn't work :/

[fatmaPico]

i found the solution : there is no . between ng-select and select-dropdown so the solution is

ng-select select-dropdown > div .options { max-height: 100px; overflow-y: auto;

}

[MrHOY]

Excuse me, do you know how to overide color box shadow when focus by TabKey ?

[istibekesi]

Using ::ng-deep in parent component should work: For example, adding box-shadow on focus:

ng-select ::ng-deep .focus {
  border-color: #1268ff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 53, 145, 0.25);
}

However, I'm still wondering if is there any better approach for customizing the style.