html - 表单输入的 CSS 伪类，在 bootstrap 中消失了

Question

当我使用带有 required 和/或 pattern 属性的输入时，CSS 伪类显示错误。例如开始在此输入上输入一些单词(不是数字)，你会看到它周围有一个红色阴影:

<input type=text pattern="\d+" required>

但是当我使用 bootstrap并将 form-control 类添加到输入中，css 伪类(红色阴影)不会显示在输入中:

<input type=text pattern="\d+" required class="form-control">

如何再次显示 css 伪类？

Answer 1

我刚刚评论了这个，但我也会把它变成一个答案，因为附加的代码片段似乎对我有用。

你有专门自己设置样式吗？因为 bootstrap 为输入元素设置了边框颜色。您期望的红色边框可能只是您的浏览器内部样式表，虽然 Bootstrap 样式选择器不那么具体，但它仍然被评为更重要。

换句话说:尝试将您自己的样式用于 :invalid 并使其成为 !important。

<input type=text pattern="\d+" required>
<style> input:invalid { border:1px solid red !important; }</style>

<input type=text pattern="\d+" required>