ion-item 右下边框

Question

I have a ion-item described as:

  <ion-row>
  <ion-item class = "Checkbox">
<ion-label>Remember my choice</ion-label>
<ion-checkbox [(ngModel)]="remember"></ion-checkbox>
  </ion-item>
  </ion-row>

where the Checkbox class is described as:

.Checkbox {
   color: white;
   background:#c34545;
}

The problem is that this gives my ion-item a weird bottom right border which you can check out:

I found the border property on the button class as:

button {
border: 0;
border-top-color: initial;
border-top-style: initial;
border-top-width: 0px;
border-right-color: initial;
border-right-style: initial;
border-right-width: 0px;
border-bottom-color: initial;
border-bottom-style: initial;
border-bottom-width: 0px;
border-left-color: initial;
border-left-style: initial;
border-left-width: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;

But disabling it gives me this:

This is really making me pull my hair out. The only other possible conflict in the scss file is the ion-row that I have defined:

ion-row {
   align-items: center;
   text-align: center;
}

Answer 1

The best way to remove the bottom line is to add no-lines property to ion-item . No need to add any css styles.

Answer 2

向 ion-item 标签传递一个名为 lines 且值为 none 的参数。

<ion-item lines="none">

Answer 3

Found the answer, thanks to Mr.Bellians' comment. I went and took another look.

.item-md.item-block .item-inner {
padding-right: 8px;
border-bottom: 1px solid #dedede;
  }

As you can see it has a border-bottom. I overrided it in my scss file and it looks fine now.