如何删除离子中的项目内边框

Question

      <ion-item  color="transparent" padding="0px">
        <ion-input type="email" placeholder="username"></ion-input>

      </ion-item>

      <ion-item color="transparent" padding="0px" no-lines>
        <ion-input  id="password" type="password"  placeholder="Password"></ion-input>
        <ion-icon name="albums"></ion-icon>
      </ion-item>

我正在用 ionic 创建一个登录表单。但我有一个问题，我想要在项目内部有一个底部白色边框。我的 CSS 无法正常工作，如果您有任何建议，请给我......谢谢

Answer 1

以下是我的解决方案，不确定它是否适用于所有情况，但至少对于我的项目来说它是有效的。

解决方案：添加lines="none"到 ion-item 标签。

<ion-item style="--background: transparent;" lines="none">
    <ion-avatar  style="width: 60px;height: 60px;" slot="end" >
        <ion-img [src]="displayProfilePic" style="width: 100%" ></ion-img>
    </ion-avatar>
</ion-item>

参考： https: //ionicframework.com/docs/api/list

注意：它也适用于 ion-list。

Answer 2

尝试这个

<ion-item lines="none" class="remove_inner_bottom"> //here is the border bottom removal code
    <ion-label>
      No Lines Item
    </ion-label>
  </ion-item>

上面的代码没有边框底部

在你的CSS里面

.remove_inner_bottom{
   --inner-border-width: 0; // this removes the inner border width
}

请找到为 ion-item 应用 sass 的链接