Change input placeholder style doesn't work


I try to change color for input placeholder but don’t see any effect.

For angular it works properly: [ANGULAR DEMO][1]

For Ionic (beta 4) nothing happens: [IONIC DEMO][2]

I used:

*::-webkit-input-placeholder {
  color: red;
*:-moz-placeholder {
  color: red;
*:-ms-input-placeholder { /* IE10+ */
  color: red;

and HTML part:

<label class="item-input-wrapper wm-header-color">            
            <i class="icon ion-ios7-search placeholder-icon wm-search-group-input"></i>
                ng-focus="searchFocused = true"
                ng-blur="searchFocused = false"
            class="button button-icon ion-android-close input-button"

Do I miss something?

How can I override style?


More of a codepen issue, codepen actually adds the css you write before ionic so it doesn’t override.


Thank you for quick answer, your solution with force style for sure works, but don’t think its codepan problem. It didnt work on devices also. See PLUNKER

I don’t like to use !important tag but thanks,

Interesting, if I add input instead of * as the selector, it works.

1 Like

Really, it works for you? I am not sure if I understood correctly what “it works” means - I thought it means we should see the placeholder color of the searchbar appear in red, but when I click on that PLNKR link ( I still see the placeholder in gray - does that mean it actually does not work? Please help in clarifying because in my own code I have the same CSS for changing the placeholder color and for my own ionic code it doesn’t work either. Thanks!

By works for me, I mean the css turns the placeholder red

Thanks very much for the repsonse. I was amazed at first, because it’s clearly gray on my screen - in Firefox.

So I tried chrome (chromium) and it worked!

So I just relized there’s a colon missing from the -moz rule: instead of:

input:-moz-placeholder { ...


input::-moz-placeholder { ...

and all it’ll work in Firefox too.

Thanks so much!

For what it’s worth @doron, there may not have been a colon missing as apparently there is an old and new syntax for moz (so you might want both). Old way has one colon, new has two: