Remove foucs line of ion-list items in ionic

Issue

Just want to remove the focus line in ion-item in ion list.

<ion-list >
            <ion-item style="margin-bottom: 10px; border: 1px solid #A7A7A7" no-lines>
              <ion-label>
                <ion-icon ios="ios-mail" md="md-mail"></ion-icon>
              </ion-label>
              <ion-input no-lines [(ngModel)]="loginData.email" [formControl]="email" id="email" type="text" required placeholder="Email *"></ion-input>
            </ion-item>
            <ion-item style="border: 1px solid #A7A7A7">
              <ion-label>
                <ion-icon ios="ios-unlock" md="md-unlock"></ion-icon>
              </ion-label>
              <ion-input no-lines [(ngModel)]="loginData.password" [formControl]="password" id="password" type="{{passwordtype}}" required
                placeholder="Password *"></ion-input>
              <button  class="eye-icon-btn" type="button" item-right (click)="managePassword()">
                <ion-icon name="{{passeye}}"></ion-icon>
              </button>
            </ion-item>
          </ion-list>

i need to remove highlighted red color circle borderlines on above mentioned screen shots. How to do?

Solution

Try this

add no-lines to ion-item

<ion-item no-lines></ion-item>

and remove shadow on focus by using css box-shadow property

item-inner { border-bottom-color: transparent !important; box-shadow: none !important; }

Answered By - Znaneswar