css - 无法在 ionic 元素中添加边框底部

Question

我希望 ion-item 的边框触到尽头。当我为其编写 css 类时，浏览器不应用样式。

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

}

你可以看到下面的截图

将 !important 添加到 css 中的 border-bottom 属性后，结果如下所示:

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

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