看看Firefox或Chrome中的这两个小玩意。在this one中，我得到了一个简单的表单，它有一个required属性和一个submit按钮。当框为空时按"submit"会使它的样式为invalid（在Firefox中，它是一个红色的轮廓）。但它会等到你按submit时才显示它是无效的。
现在试试this one，它和this是一样的，除了有一些css：
input:invalid{
border-color:orange
}除了这一次橙色边框颜色甚至在按下submit之前就应用了。所以当且仅当你手动为表单设置了invalid样式时，浏览器才会应用它，这不是直观的行为。当然，在你输入任何内容之前，必填字段将无效。
有什么办法可以解决这个问题吗？
4条答案
按热度按时间k7fdbhmy1#
这就是你要找的：http://jsfiddle.net/CaseyRule/16fuhf6r/2/
按如下方式设置样式：
然后添加此js：
我不相信没有javascript就有办法实现这一点。
k10s72fa2#
在Firefox中，您可以用途：
这是浏览器添加的伪类，用来给予红色。它不是在页面加载时添加的，否则所有的输入都会显示红色。我在其他浏览器中没有找到等效的类。
pftdvrlh3#
这里有一篇很好的文章是关于如何防止：invalid styles在页面加载时激活（以及其他css技巧）.该技术需要一个Placeholder属性，但除此之外，它是一个纯粹的css解决方案.
ecfdbz9o4#
也许这行得通：
当输入无效时，这将覆盖分配给输入的任何其他边框颜色。