Light mode ion-input of type "date" with empty value displayed in black color on Safari

Safari displays the current date as default value when passing no value to a input type="date". This is the default behavior.

Using ion-input type="date" with no value in light mode in Safari, it displays the current date in black color, making it look like as if it already has a valid value, even though it is empty.

When using a native input type="date" Safari also displays the current date as default value, but in gray color and appears like a normal placeholder.

image

Stackblitz example: Ionic Docs Example - StackBlitz

I haven’t found a way to style the placeholder of the ion-input type="date" field. So far, nothing seems to work.

ion-input {
  --placeholder-color: blue;
  --placeholder-opacity: 0.25;
}

This works for a ion-input type="text" field, but not for the date field.

Any ideas?

Please send the StackBlitz link to the actual project. We cannot run the server link by itself.

Sorry, here is the correct link:

I also edited my entry post.

I’ve dug a bit deeper. It seems if you use the date field in a reactive form you can modify the appearance of the placeholder with .ion-invalid:

ion-input[type='date'].ion-invalid {
  color: rgba(255, 255, 255, 0.75);
}

image

But this has a negative effect on other browsers, because there the date field will be completely white until a valid date was entered.