changing css of ng-multiselect-dropdown

try adding the following code in your component's css file

::ng-deep .multiselect-dropdown .dropdown-btn{
    // add your own styles here. 
    // eg. min-height:5px;
}

I also faced the same issue. I solved it with applying the style globally. It means in style.css and not inside any component CSS file that you are working on.

so go to the angular's Style.css and add the desired CSS properties and give class="container" include the below code in Style.css Eg:

.container .multiselect-dropdown .dropdown-btn {
width: 200px!important; //include your code }

and in the component.html file where you are using ng-multiselect dropdown, include this

 <ng-multiselect-dropdown

class="container"  //include this
[placeholder]="'Environment'"
[data]="envData"
[settings]="dropdownSettings"
(onSelect)="onEnvSelect($event)"


>

You should be able to get this done by applying ngClass or ngStyle. Check out the ngClass Documentation

Have you tried , with the style code in the "style.css" file, to toggle off the '>' selector in your style code?

I've tried to look for a demo example of 'ng-multiselect-dropdown' here and I've noticed that there is another element between 'ng-multiselect-dropdown' and '.dropdown-list', the one highlighted in blue.

If in your code there is also this kinda of element, than you should change your style code as below:

ng-multiselect-dropdown .dropdown-list[_ngcontent-c6] li[_ngcontent-c6] {
     padding: 16px 10px;
     cursor: pointer;
     text-align: left;
}

Or also:

ng-multiselect-dropdown .multiselect-dropdown > .dropdown-list[_ngcontent-c6] li[_ngcontent-c6] {
         padding: 16px 10px;
         cursor: pointer;
         text-align: left;
    }

Because if you're using the selector '>' then your rule would be applied only on the elements where the class '.dropdown-list' is immediately after the 'ng-multiselect-dropdown' element.
Suggestion:
I would like to suggest you to avoid the use of angular auto generated code in your style rules(the '_ngcontent-c6'). Your code would be more clear and reusable.

Let me know if this was the solution.

You have to apply the style in a global css file e.g. site.css and not in a component css file. Here is an example in site.css:

  .multiselect-dropdown[_ngcontent-c3] .dropdown-btn[_ngcontent-c3] .selected-item[_ngcontent-c3] {
    margin-right: 4px;
    background: #fb4f4f !important;
    padding: 0 5px;
    color: #fff;
    border-radius: 2px;
    float: left;
}

Though I am very very late ,but still it can help out to those who are still looking for solution I just added custom class to the component and used angular

/deep/ 

property(though the use is deprecated you can refer any other alternatives like :ng-host)

for eg:

 <ng-multiselect-dropdown class="custom-asset-dropdown"
                    [placeholder]="'Select Asset'"
                    [data]="compareAssetGroup"
                    [(ngModel)]="selectedAssetGroup"
                    [settings]="multiSelectAssetSettings"
                    (onSelect)="onItemSelect($event)"
                    (onSelectAll)="onSelectAll($event)"
                  >
 </ng-multiselect-dropdown>

and your css can be:

/deep/ .custom-asset-dropdown{
/* hello make my css looks cool instead of default css*/
}

I'm a beginner with Angular, I started today. Was testing this today. What I did was:

<ng-multiselect-dropdown
    [class]="'my-class'"

And define your style in 'my-class'

Use any developer tool (chrome) and inspect the changes you want to make. Note the classes and in order to access those classes use following syntax:

::ng-deep 'class name which you want to access'{ changes}

::ng-deep .multiselect-dropdown .dropdown-btn{ 
      display: none;
 }

I solved the problem in my Angular 17 project, taking 1 day, so I could change the width value of the selected-item

:host ::ng-deep {
    #ozelDeepCss{
        .multiselect-dropdown .dropdown-btn {
            .selected-item-container {
                    max-width: 300px;
                    margin-top: 4px;
                    margin-bottom: 4px;
                    .selected-item{
                    background: #fb4f4f !important;
                    //   width: 200px;
                    max-width: 300px;
                }
            }
        }
    } 
}

<ng-multiselect-dropdown
  id="ozelDeepCss"  
  [placeholder]="'Şube Seçiniz.'"
  [settings]="dropdownSettings"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  (onSelect)="onItemSelect($event)"
  (onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>