Html 表单输入的CSS伪类，在引导中消失

当我使用带有

required

和/或

pattern

属性的输入时，CSS伪类显示为on error。例如，开始在此输入上键入一些单词（不是数字），您会看到它周围有一个红色阴影：

---

我刚刚对此发表了评论，但我也将其转化为答案，因为附加的代码片段似乎对我有用

---

你有没有专门为自己定好款式？因为引导设置了输入元素的边框颜色。您期望的红色边框可能只是您的浏览器内部样式表，尽管引导样式选择器没有那么具体，但它仍然被认为更重要

换言之：尝试使用你自己的风格：无效并使其成为！重要的

输入：无效{border:1px纯红！重要；}

查看浏览器控制台中的css规则。您将看到什么规则覆盖了您的规则。您是否专门为自己设置了样式？因为引导设置了输入元素的边框颜色。您期望的红色边框可能只是您的浏览器内部样式表，尽管引导样式选择器没有那么具体，但它仍然被认为更重要。换句话说：尝试使用您自己的样式：invalid.not border。光影。我使用Firefox。我发现问题返回到bootstrap的

box shadow

，它覆盖了Firefox的box shadow，用于无效的inut。我通过在css中添加

：-moz ui invalid{box shadow:0 1.5px 1px red；}

来解决这个问题。