Ionic 4 IonDatetime. color overlaps --placeholder-color

Ionic Framework
1

this is how the component looks like
image

although the style is

.datetimeInput {
–padding-start: 0px;
font-style: normal;
font-weight: 500;
–placeholder-color: #bdbdbd !important; //it’s gray, not black
color: #333333;//its black
font-size: 16px;
}
and component
<IonDatetime
slot=“start”
onIonChange={(e) => onChange(e)}
value={value}
className={styles.datetimeInput}
displayFormat=“DD/MM/YYYY hh:mm”
placeholder={t(“Date and time of the attack”)}
/>

placeholder has the same color as the main one

2

@TakhUsam Ionic’s default selector for platforms is probably still stronger.

Did you check directly from the debugger what selectors are applying?

You could try something like:

ion-input.ion-untouched,
ion-input.ion-touched {
    &.datetimeInput {
         –placeholder-color: #bdbdbd;
     }
}