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 :
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?
Thanks
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
Probably you're having issues with the component encapsulation. You can always try a few things, forcing the styles to change, such as:
!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.
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.