ng multiselect dropdown custom css

1//Angular by default adds some _ngcontent-xx to your component CSS file
2//so that it won't conflict with other components.
3//To solve your problem you need to add below CSS in your global style.css file or
4//another way to make your component as encapsulation: ViewEncapsulation.None meaning its CSS
5//won't append default classes of Angular.
6
7//Solution 1: Add in global stylesheet.
8style.css
9.multiselect-dropdown .dropdown-btn {
10    display: inline-block;
11    border: 1px solid #adadad;
12    width: 100%;
13    padding: 6px 12px;
14    margin-bottom: 0;
15    font-size: 12px;
16    font-weight: 400;
17    line-height: 1.1;
18    text-align: left;
19    vertical-align: middle;
20    cursor: pointer;
21    background-image: none;
22    border-radius: 4px;
23}
24
25//Solution 2 Make component ViewEncapsulation.None
26component.ts
27import { Component } from '@angular/core';
28
29@Component({
30  selector: 'my-app',
31  templateUrl: './app.component.html',
32  styleUrls: [ './app.component.css' ],
33  encapsulation: ViewEncapsulation.None // Add this line
34})
35export class AppComponent  {
36
37}
38

1// you can override css of any node module or library by :host and ::ng-deep.
2
3:host ::ng-deep .multiselect-dropdown .dropdown-btn {
4	display: inline-block;
5	border: 1px solid #adadad;
6	width: 100%;
7	padding: 6px 12px;
8	margin-bottom: 0;
9	font-size: 12px;
10	font-weight: 400;
11	line-height: 1.1;
12	text-align: left;
13	vertical-align: middle;
14	cursor: pointer;
15	background-image: none;
16	border-radius: 4px;
17}