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

Ionic Framework Ionic Angular
1

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?

2

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

3

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.