无法在 ion-item 中添加 border-bottom

Question

我想要 ion-item 的边框触到 ends.When 我为此写了 css class,浏览器不应用样式。

.html

<ion-item class="item-class">
<input type="text" placeholder="Username">
<ion-icon item-end name="people"></ion-icon>
</ion-item>

.css

.item-class {

border-bottom: 1px solid #F1F1F1;

}

你可以看到下面的screen-shot

在 css 中的 border-bottom 属性添加 !important 后，结果如下：

在输入字段中单击时，蓝线也可见。

Answer 1

在你的 variable.scss 文件的 android 部分添加这个。

$text-input-md-highlight-color-invalid: transparent;
$text-input-md-highlight-color-valid: transparent;
$text-input-md-show-invalid-highlight: transparent;
$text-input-md-highlight-color: transparent;
$text-input-md-show-valid-highlight: transparent;

为了避免项目行使用这个

<ion-item class="item-class" no-line> (或)

在您尊敬的 scss 文件中

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

无法在 ion-item 中添加 border-bottom

Unable to add a border-bottom in ion-item

css

ionic-framework

ionic2

ionic3