删除离子中离子列表项的焦点线答案

【问题标题】：Remove foucs line of ion-list items in ionic删除离子中离子列表项的焦点线
【发布时间】：2019-04-12 16:56:28
【问题描述】：

只想删除离子列表中离子项中的焦点线。

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

我需要删除上述屏幕截图上突出显示的红色圆圈边界。怎么做？

【问题讨论】：

删除box-shadow即box-shadow: none !important;

标签： html css ionic-framework

【解决方案1】：

试试这个

将no-lines 添加到ion-item

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

并使用 css box-shadow 属性去除焦点上的阴影

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

【讨论】：

我已经试过了。它只是删除线，但再次聚焦时它正在显示线
你是否也删除了box-shadow？

【解决方案2】：

我今天在使用 Ionic 5 时遇到了同样的问题。对我有用的是将 lines="none" 添加到 ion-item：

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

文档链接：https://ionicframework.com/docs/api/item#item-lines

【讨论】：