I have a login form that has an email and password input. What I want to do is a little eye outline icon on the right side of the input. That has a function that will show and hide the password.

The function is fully working however. I can't get the design that I want to. Something like this. But in my case I am not using a <ion-item>

Here is my code in my html

    <ion-row class="p-l-4">
          <ion-col col-12 class="col-static">
            <ion-input class="input-cover" type="password" formControlName="password" placeholder="Password" required></ion-input>
<!-- Small button icon of eye goes here -->
          </ion-col>
        </ion-row>

I tried to do anything with it but ended up messing it. Because my input has a border.

Here is the image below of the result.

Here is my code of my input in scss

ion-input {
  border: 5px !important;
}

.text-input-ios, .text-input-md {
    border-radius: 5px;
    border: 1px solid #efefef;
}

.text-input {
    margin: 0;
    width: calc(100% - 8px);
    padding: 13px 8px;
}

Appreciate if someone could help. Thanks in advance.

I have a login form that has an email and password input. What I want to do is a little eye outline icon on the right side of the input. That has a function that will show and hide the password.

The function is fully working however. I can't get the design that I want to. Something like this. But in my case I am not using a <ion-item>

Here is my code in my html

    <ion-row class="p-l-4">
          <ion-col col-12 class="col-static">
            <ion-input class="input-cover" type="password" formControlName="password" placeholder="Password" required></ion-input>
<!-- Small button icon of eye goes here -->
          </ion-col>
        </ion-row>

I tried to do anything with it but ended up messing it. Because my input has a border.

Here is the image below of the result.

Here is my code of my input in scss

ion-input {
  border: 5px !important;
}

.text-input-ios, .text-input-md {
    border-radius: 5px;
    border: 1px solid #efefef;
}

.text-input {
    margin: 0;
    width: calc(100% - 8px);
    padding: 13px 8px;
}

Appreciate if someone could help. Thanks in advance.

• javascript
• html
• css
• ionic-framework
• ionic3

3 Answers 3

For those who land here I tried adding the icon inside a button it worked. My code:

<ion-item id="location">
  <ion-input [(ngModel)]="searchLocation" type="text" placeholder="Enter / Select Location" (ionChange)=segmentChanged($event)></ion-input>
  <button class="find-me" clear item-right icon-only>
    <ion-icon name="pin"></ion-icon>
  </button>
</ion-item>

Here is the link Right align a button inside an ion-input

 <ion-row class="p-l-4">
    <ion-col col-12 class="col-static">
       <ion-input class="input-cover" type="password" formControlName="password" placeholder="Password" required></ion-input>
<ion-icon name='eye' class="eye-icon" item-right></ion-icon>
        </ion-col>
   </ion-row>

.col-static{
  position:relative;
}

.col-static .eye-icon {
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
}

Try this,

<ion-item>
   <ion-icon name='eye' item-right></ion-icon>
   <ion-input type="password" formControlName="password" placeholder="Password" required></ion-input>
</ion-item>

If you are using Grid, try this..

<ion-grid>
   <ion-row>
      <ion-col col-md-10>
         <ion-input type="email" id="login_email" name="email" formControlName="email" placeholder="Email" required></ion-input>
      </ion-col>
      <ion-col col-md-2>
         <ion-icon name='eye'></ion-icon>
      </ion-col>
   </ion-row>
</ion-grid>