Ng2-select: using custom css

[jenb34]

Hi, can anyone help me with how to use custom css with the ng-select please?

e.g. to change the height

I've included the ng-select.css in my project but the ng-select still appears to be using css from elsewhere?

Using Angular2...

[madpixl]

I have the same question. I would like to disinclude the css that gets dumped into the head of my spa, as I have a skinned version of bootstrap I'd prefer to have it use. The way classes are defined (with built in arrays), it cannot work with our current design. Is there any way to make that happen, or disinclude the styles? This is the exact reason we abandoned PrimeFaces a couple of years ago.

Generic bootstrap classnames would be great instead of the arrays in the classnames.

[brihaspati]

You can try NgStyle with an expression pointing to a style object. I am able to change the height and other few styles using the same approach

Take an input property to your component

@Input() public stylesObj;

and send the object from parent component or assign a local one

this.stylesObj = {
        width: '200px',
        height:'25px'
      };

and then apply this object in html like this

<div [ngStyle]="stylesObj">

  <ng-select [allowClear]="true"
              [items]="items"
              (data)="refreshValue($event)"
              (selected)="selected($event)"
              (removed)="removed($event)"
              (typed)="typed($event)"
             >
  </ng-select>

</div>

[manish-jain-1]

Looking to style overall component and individual items inside. Any assistance how to achieve it?

[manish-jain-1]

I was able to override some default styles. It will be nice if there are styling properties exposed for all the elements.

[GiantFlash]

I´ve to customize the input element. Is it possible to load some custom stuff, which will shown inside the input field and/or dropdown? Or maybe load a custom template?