Ionic 2 placeholder text styling

Question

I am working on an application using Ionic 2 rc0 and have several input fields throughout the application that still need styling.

<ion-item class="su-p3-item">
  <ion-label floating class="su-input">Your name</ion-label>
  <ion-input type="text" class="su-input"></ion-input>
</ion-item>

ionic 2 input api http://ionicframework.com/docs/v2/api/components/input/Input/

Specifically, I need to change the styling of the placeholder text, and bottom-border when active. Through the API, and provided SASS variable overrides, i could not figure out how to override the inherited styles for borders and placeholder text for input fields.

I would like to avoid using '!important' in addition to these changes on affecting the specific page each input is on (I dont want the changes to be 'global').

score 27 · Accepted Answer · answered Dec 16 '16 at 10:49

27

With Ionic2 RC4, you have to add the following line in your app.scss file:

.text-input::-moz-placeholder {
  color: white;
}

.text-input:-ms-input-placeholder {
  color: white;
}

.text-input::-webkit-input-placeholder {
  text-indent: 0;
  color: white;
}

answered Dec 16 '16 at 10:49

Fr4NgUs

468
6
9

1

it does work, in my case my input is an `ion-searchbar` component so I had to: `.searchbar-md .searchbar-input::-webkit-input-placeholder { color: yellow }` – skinny_jones Oct 30 '17 at 20:59

score 10 · Answer 2 · answered Feb 23 '18 at 12:18

10

Just do the ::placeholder selector, i.e.

<ion-input placeholder="enter placeholder here..." class="custom-input" type="text"></ion-input>

and in css just call it like

ion-input {
  &.custom-input {
    font-size: 20px; //sets text font size
    ::placeholder {
      font-size: 12px; //sets placeholder font size
    }
  }
}

answered Feb 23 '18 at 12:18

Marko

917
9
14

Good option for page specific styling compared to other answers – Black Mamba Mar 22 '18 at 12:49
thanks this doesnt work for ion-select ion ionic5 though – minigeek Apr 23 '20 at 09:17

score 5 · Answer 3 · answered May 28 '17 at 17:36

5

Ionic 2 provides sass variable overrides you can use to easily change the style.

theme/variables.scss

$text-input-placeholder-color:(#000);

answered May 28 '17 at 17:36

score 5 · Answer 4 · answered Aug 24 '18 at 17:57

5

This works for me :D

ionic cli 4.1.1

example.scss

ion-input {
    ::placeholder{
        color:white !important;
    }
}

example.html

<ion-input placeholder="Username" type="text"></ion-input>

answered Aug 24 '18 at 17:57

user10018800

51
1
1

score 1 · Answer 5 · answered Jan 20 '19 at 10:55

1

For Ionic 4 from docs custom-properties.

<ion-input class="custom-class"></ion-input>

*.scss

ion-input {
    &.custom-class {
        --placeholder-color: #fff;
    }
}

answered Jan 20 '19 at 10:55

Druta Ruslan

7,171
2
28
38

score 0 · Answer 6 · answered Oct 18 '16 at 09:45

0

For Ionic2.0 , inside file app.ms.css I tried to do styling over .text-input::-moz-placeholder around line number 6069 and it worked. Same can be tried for RC0

answered Oct 18 '16 at 09:45

Praful vats

85
1
2
8

score 0 · Answer 7 · answered Nov 21 '19 at 10:24

In case someone needs help:

ion-input {
            color: #000000ad !important;
            font-size: 16pt;
            --placeholder-color: black !important;
            --placeholder-opacity: 100%;
          }

opacity value makes it looks like just like input text.

Ionic 2 placeholder text styling

7 Answers7

Linked