Continuing the discussion from Ionic change causes css to stop working - any way to modify shadow dom to fix it?:
<ion-item class="ion-no-padding ion-no-border ion-no-margin">
<ion-select labelPlacement="stacked" value="" placeholder="Select Embroyes" class="custom">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</div>. .custom {
border-radius: 12px;
font-size: 12px;
–color: var(–white-color);
–placeholder-color: rgba(255, 255, 255, 0.2);
–placeholder-opacity: 0.8;
–padding-end: 20px;
–padding-start: 20px;
height: 50px;
outline: none;
position: absolute;
background-blend-mode: color-burn, luminosity;
–box-shadow: inset 0px -0.5px 1px rgba(255, 255, 255, 0.3), inset 0px -0.5px 1px rgba(255, 255, 255, 0.25), inset 0px 1.5px 4px rgba(0, 0, 0, 0.08), inset 0px 1.5px 4px rgba(0, 0, 0, 0.1);
–background: var(–dark-gray);
text-align: left;
–highlight-color-focused: var(–white-color);
position: absolute;
}ion-list {
// height: 53px;
border-radius: 12px;
}. // else.
ion-item {
–inner-padding-end: 0px;
–padding-start: 0px;
–border: none;
}
ion-select {
–placeholder-color: rgba(255, 255, 255, 0.2);
–placeholder-opacity: 0.8;
width: 100%;
justify-content: center;
}
ion-select::part(placeholder),
ion-select::part(text) {
flex: 0 0 auto;
}
ion-select::part(text) {
–color: var(–white-color);
}
ion-select::part(icon) {
–color: var(–white-color);
opacity: 1;
}