Ion-input set placeholder text-transform lowercase

Hi, I’m trying to set the ion-input placeholder to lowercase using css when the ion-input has applied text-transform to uppercase in Ionic v4.

From official documentation
–placeholder-color: Color of the input placeholder text
–placeholder-font-style: Font style of the input placeholder text
–placeholder-font-weight: Font weight of the input placeholder text
–placeholder-opacity: Opacity of the input placeholder text

As you can see there aren’t tag for text-transform.

I have tested things like this, but nothing works.

::-webkit-input-placeholder {
text-transform: lowercase !important;
}

:-moz-placeholder {
text-transform: lowercase !important;
}

::-moz-placeholder {
text-transform: lowercase !important;
}

:-ms-input-placeholder {
text-transform: lowercase !important;
}

Anyone have any ideas?

So this isn’t really an “official” solution, but could work.

ion-input input::placeholder{
  text-transform: lowercase;
}

Since ion-input isn’t using shadowDOM yet, you could use this, though it could break in the future when we go to convert this to fully shadowDOM

Thank you Mike for your response. I have tested many options including your response but it hasn’t success result.

At this point, I can’t apply text-transform for placeholder using css.

I hope that soon you and your team will be able to include the ion-input in the shadowDOM.

it seems to work fine here

You are right, your css code works. My problem came from that I was trying to set the style in the child page scss and the parent page was overwriting that style.

Thank you a lot for your help.

I have leaving an image with your code and my problem solved.

Thank you so much again.