How to set styles to ng-select box using Scss in Angular4 - html

Question

I have a ng-select field in my HTML, i want to apply some part of css to that, Here i am using scss, i am not getting how to transverse these codes to the class i had given, Can anyone help me to sort it out.
Scss:
.box {
background-color: #4389a9;
width: 185px;
height: 45px;
padding: 8px 20px;
right: -19px;
cursor: pointer;
top: 19px;
transition: bottom 2s;
border-radius: 24px;
margin-bottom: 26px;
select-dropdown {
display: none;
}
}
HTML:
<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>
CSS part to be added to scss:
ng-select > div > div.single > div.toggle {
color: white !important;
background: none;
}
ng-select > div {
border:none !important
}
ng-select > div > div.single > div.placeholder {
color: white;
font-size: 35px;
font-family: MontserratRegular;
}
ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
background-color: #4389a9;
}
select-dropdown {
display: none;
}

Answer 1

Note:
If you are using angular cli it wont work if you add in component scss files.
To make it work, add them in styles.scss
Here is the scss you needed,
ng-select {
>div {
>div.single {
>div.toggle {
color: white !important;
background: none;
&:hover {
background-color: #4389a9;
}
}
>div.placeholder {
color: white;
font-size: 35px;
font-family: MontserratRegular;
}
>div.clear {
&:hover {
background-color: #4389a9;
}
}
}
border: none !important;
}
}
select-dropdown {
display: none;
}

Answer 2

Suppose we want to change the styling of appearance outline :
we can override the css as :
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
.ng-dropdown-panel-items
.ng-option.ng-option-selected.ng-option-marked {
color: #26808a !important;
}
.ng-select.ng-select-focused .ng-select-container:after {
border-color: #26808a !important;
}
.ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,
.ng-select.ng-select-focused
.ng-select-container.ng-appearance-outline:hover:after {
border-color: #26808a !important;
}
.ng-select.ng-select-focused
.ng-select-container
.ng-value-container
.ng-placeholder {
transform: translateY(-1.28125em) scale(0.75) perspective(100px)
translateZ(0.001px);
color: #26808a !important;
}
.ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow {
color: #26808a !important;
}
.ng-select .ng-select-container.ng-appearance-outline {
min-height: 51px !important;
}
ng-select tag:
<ng-select
[items]="listofBanks"
[(ngModel)]="selectedCity"
bindLabel="firstName"
bindValue="id"
[searchFn]="customSearchFn"
(change)="onSelection($event)"
appearance="outline"
class="custom"
></ng-select>
Note: Works fine with "#ng-select/ng-select": "^5.0.4"