嘿，我太懂这个问题了！在Ionic里直接给ion-input加底部边框经常会遇到这种覆盖不全的情况——这是因为ion-input的内部DOM结构和组件默认样式在“抢地盘”，你直接加的样式优先级不够，或者被原生input的边框挡住了。

问题根源 #

Ionic的ion-input并不是一个简单的原生input标签，它内部会渲染出嵌套的DOM结构，底部边框可能来自ion-item、ion-input本身，或者里面的原生<input>元素。你直接给.invalid类加的border-bottom要么优先级不够被默认样式覆盖，要么和原生input的边框重叠，导致看起来没完全覆盖。

解决方案 #

这里有几个靠谱的解决办法，按优先级推荐：

1. 提高选择器优先级，同时处理原生input边框

修改你的CSS选择器，让它更具体，同时去掉原生input的默认边框避免重叠：

/* 更具体的选择器，确保样式优先级更高 */
ion-item ion-input.invalid {
  border-bottom: 1px solid rgba(255, 0, 0, 0.71);
  box-sizing: border-box; /* 确保边框包含在元素尺寸内，不会超出 */
}

/* 去掉原生input的底部边框，避免双重边框 */
ion-item ion-input.invalid input {
  border-bottom: none;
}

你的模板可以保持不变：

<ion-item>
  <ion-label floating>Vorname</ion-label>
  <ion-input formControlName="vorname" type="text" [class.invalid]="registerform.controls.vorname.touched && registerform.controls.vorname.errors"></ion-input>
</ion-item>

2. 给父元素ion-item加状态类（更推荐的Ionic风格）

Ionic的表单状态通常推荐绑定到ion-item上，这样可以更精准地控制整个表单项的样式：
修改模板，把状态类绑定到ion-item：

<ion-item [class.invalid-item]="registerform.controls.vorname.touched && registerform.controls.vorname.errors">
  <ion-label floating>Vorname</ion-label>
  <ion-input formControlName="vorname" type="text"></ion-input>
</ion-item>

然后写CSS：

.invalid-item ion-input {
  border-bottom: 1px solid rgba(255, 0, 0, 0.71);
}

/* 如果还是有原生input边框干扰，加上这行 */
.invalid-item ion-input input {
  border-bottom: none;
}

3. 极端情况用!important（尽量少用）

如果以上方法都不生效，可以临时用!important强制覆盖样式，但这是最后的选择，因为它会破坏样式的优先级规则：

.invalid {
  border-bottom: 1px solid rgba(255, 0, 0, 0.71) !important;
}
.invalid input {
  border-bottom: none !important;
}

为什么这样有效？ #

Ionic组件的默认样式有自己的选择器优先级，比如ion-item ion-input的样式权重比单独的.invalid高，所以我们需要用更具体的选择器来覆盖它。同时，原生input元素默认可能有自己的边框，去掉它就能让我们自定义的边框完全显示出来。

内容的提问来源于stack exchange，提问作者U rock