CODEWITHSUNDEEP
htmlcssangularionic-frameworkionic2
Pezetter
Pezetter

Reputation: 2862

Ionic 2 placeholder text styling

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').

Upvotes: 7

Views: 30051

Answers (7)

Fay007
Fay007

Reputation: 2917

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.

Upvotes: 0

Druta Ruslan
Druta Ruslan

Reputation: 7402

For Ionic 4 from docs custom-properties.

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

*.scss

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

Upvotes: 1

user10018800
user10018800

Reputation: 51

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>

Upvotes: 5

Marko
Marko

Reputation: 957

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
    }
  }
}

Upvotes: 10

user1752532
user1752532

Reputation:

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

theme/variables.scss

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

Upvotes: 5

Fr4NgUs
Fr4NgUs

Reputation: 476

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;
}

Upvotes: 27

Praful vats
Praful vats

Reputation: 85

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

Upvotes: 0

Related Questions