Change input placeholder style doesn't work

ionic-v1
1

Hello,

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>
            <input 
                type="search" 
                placeholder="Search"
                ng-focus="searchFocused = true"
                ng-blur="searchFocused = false"
                ng-change="scrollTop()"
                ng-model="searchGroup"
                >
        </label>
        <button 
            class="button button-icon ion-android-close input-button"
            ng-click="switchSearch()">          
        </button>

Do I miss something?

How can I override style?

Thanks,
[1]: http://jsfiddle.net/9Ymvt/1475/
[2]: http://codepen.io/anon/pen/rjuKI

2

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

2 Likes
3

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,

4

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

1 Like
5

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 (http://plnkr.co/edit/1pC4NzQnF5r5gZRvYkTh420) 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!

6

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

image
Screen Shot 2015-07-28 at 3.56.36 PM.png833×105 8.38 KB

7

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 { ...

use

input::-moz-placeholder { ...

and all it’ll work in Firefox too.

Thanks so much!

8

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: https://css-tricks.com/snippets/css/style-placeholder-text/

9

https://ioncheatsheet.com

welcome…