3

I need to use the component ng-select , but when I select an option in the control I got this blue outline in the select component :

enter image description here

I need to customize this to match the style in my other components. I tried changing the outline property in the two classes that they mention in the Custom Styles section, but nothing happens

Is there any way I can change the color and size of that blue outline? What class should I use?

EDIT:

STACKBLITZ - DEMO

Thanks

Community
  • 1
  • 1
eddy
  • 4,373
  • 16
  • 60
  • 94

3 Answers3

4

Add css to style.css 

.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
    border-color: red;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 0 3px rgba(0,126,255,0.1);
}

https://stackblitz.com/edit/angular-3ll5zo-ko2nzx?file=src/styles.scss

enter image description here

Avinash Dalvi
  • 8,551
  • 7
  • 27
  • 53
  • Thanks aviboy2006 I was about to ask you how I could get rid of that blue outline and then I realized it was just a shadow. May I ask how you managed to find the exact selector? – eddy Jun 07 '20 at 22:11
  • I did inspect element on hover i check what is effect. Then copy style and edit in style.css. – Avinash Dalvi Jun 08 '20 at 18:24
1

Probably you're having issues with the component encapsulation. You can always try a few things, forcing the styles to change, such as:

  • ::ng-deep or /deep/ (it'll be deprecated)
  • :host-context
  • !important (very bad practice)

Find more info in the official documentation

Although you can achieve what you want with any of the options above, the library or plugin should allow you to modify the styles without extra configurations. Perhaps, if you share a working example (Stackblitz or some fiddle), I could understand better your problem.

Cristian Alarcón Pieriz
  • 136
  • 5
  • No, I don't think so, because I'm not trying to change the style from within the component, but from the global styles.scss – eddy Jun 04 '20 at 21:39
  • You won't be able to access a child component from the global styles.scss because of encapsulation. That's why I'm trying to explain. Have a look at the [docs](https://angular.io/guide/component-styles#view-encapsulation) – Cristian Alarcón Pieriz Jun 04 '20 at 22:02
  • Nope, but I can set a global style that I can later use. I do that all the time with material components – eddy Jun 04 '20 at 23:19
  • 1
    I just added a demo in STACKBLITZ – eddy Jun 07 '20 at 05:21
-1

Display data using ng-option If you have simple use case, you can omit items array and bind options directly in html using ng-option component.

Ricardo Temple
  • 1
  • 1