Ion-input set placeholder text-transform lowercase

Ionic Framework Ionic Angular
1

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?

2

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

1 Like
3

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.

4

it seems to work fine here

5

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.

Screenshot 2021-04-27 at 14.28.18
Screenshot 2021-04-27 at 14.28.182880×1256 270 KB

Thank you so much again.

7 
ion-input {

    input::placeholder {
       text-transform: capitalize;
     }
}

this is work for me