无法在离子项

Question

我希望离子项的边框触摸到最后。当我为它编写 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;

}

你可以看到下面的屏幕截图

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