删除离子中离子列表项的 foucs 行

Question

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?

Answer 1

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

Answer 2

I ran into the same issue today using Ionic 5. What worked for me is adding lines="none" to ion-item:

 <ion-item lines="none"> <ion-input class="verification-code-input ion-text-center" type="text"></ion-input> </ion-item>

Documentation link: https://ionicframework.com/docs/api/item#item-lines