Heading : date text inside date field not aligned to left only on IOS 15 and higher for lightning text date type aura component

Question

I am using the following css class on my lightning-input type date field on my aura component

css:

    .THIS.test{
-webkit-appearance : none !important;
text-align :left !important;} 

cmp:

<lightning:input class="test" type="date"</lightning:input>

It is working fine on every place except IOS 15 and onward, where the date text is centre aligned instead of left.

I tried the following after checking on google for some answers :

.THIS.test{
-webkit-appearance : none !important;
text-align :left !important;} 

But this did not work.I also tried using the below statement into the css file, but it seems its not supported on aura.

input::-webkit-date-and-time-value{ text-align:left; }

Can anyone suggest what I can use in this case?

Answer 1

I think you've to give space between the .THIS and your custom class. Try the below:

.THIS .test{
text-align :left !important;
}