当我使用具有required和/或pattern属性的输入时，CSS伪类显示错误。例如，开始在这个输入上键入一些单词（而不是数字），你会看到它周围有一个红色的阴影：
<input type=text pattern="d+" required>但是当我使用bootstrap并将form-control类添加到输入时，css伪类（红色阴影）不会显示在输入上：
<input type=text pattern="d+" required class="form-control">
如何再次显示css伪类？
我刚刚对此发表了评论，但我也会把它变成一个答案，因为附加的片段似乎对我有效。
你有专门为自己设定风格吗？因为bootstrap为输入元素设置了边框颜色。您期望的红色边框可能只是浏览器内部的样式表，尽管bootstraps样式选择器不太具体，但它仍然被认为更重要。
换言之：尝试将你自己的风格用于：无效并使其生效！重要的
<input type=text pattern="d+" required>
<style> input:invalid { border:1px solid red !important; }</style><input type=text pattern="d+" required>