在HTML 5中，我们可以将输入标记为required，然后在CSS中使用[required]伪选择器进行选择。但是我只想在他们尝试提交表单而不填写必填元素时为其设置样式。是否有选择器？弹出的小消息框怎么样？
是的，因为SLaks表示没有CSS选择器可以执行此操作。我怀疑这是否会在CSS范围内，因为CSS需要检查输入的内容。
您最好的选择仍然是单击按钮时调用javascript验证功能，而不是实际提交表单。然后检查[required]字段中的适当内容，然后提交表单或突出显示未填写的必填字段。
JQuery有一些不错的插件可以帮您解决这个问题http://docs.jquery.com/Plugins/validation
您可以使用：valid和：invalid选择器。像这样的东西
.field:valid {
border-color:#0f0;
}
.field:invalid {
border-color:#f00;
}
但是，这仅在支持本机验证的浏览器中有效，并且仅适用于有意义的字段。据我所知，现在仅表示Chrome（也许是Safari，但尚未检查）。
因此，通过本机验证，我的意思是在chrome中，如果您执行<input type="email">，则将针对电子邮件类型字符串（无需任何其他JavaScript）验证该字段的值，因此上述样式将起作用。但是，如果将它们附加到type="text"字段或第二个密码字段（假定与第一个匹配），则只会变绿色，因为所有内容均有效，并且在使用密码的情况下，无论如何，都没有“类型”。
这基本上意味着要支持所有浏览器，更重要的是，您还必须使用javascript进行更广泛的验证，在这种情况下，分配.valid / .invalid类应该不是问题。 ：）
我曾使用JavaScript将.validated类应用于提交时的表单，然后使用该类为:invalid字段设置样式，例如：
.validated input:invalid {
...
}
这样，只有在提交表单之后，字段才不会在页面加载时显示为无效。
理想情况是在提交时将伪类应用于表单。
:user-error中有一个CSS Selectors 4 working draft伪类将完全做到这一点，同时触发输入模糊和表单提交。
同时，我个人使用的是很棒的webshims polyfill library，它涵盖了：user-error，或者您可以按照Toby的回答自己破解它。
input:required {
/* Style your required field */
/* Be sure to style it as an individual field rather than just add your desired styles
for a required field. */
}
[经过镀铬测试。我没有在任何其他浏览器中对其进行过测试。
此解决方案将通过属性while必需的输入字段设置为空白。当在keydown上填充必填字段时，浏览器将删除：invalid伪类。 Firefox的最新版本会自动应用类似于此样式的内容，但Chrome和IE则不会。
input[required]:invalid { box-shadow: 0 0 3px 1px red }
[非常简单，只需在元素处于焦点位置时添加类，然后在提交过程中将焦点集中在不正确的元素上，客户端将逐个填充和验证我相信这是不使用JavaScript的最佳解决方案。
input:required:focus {
border-color: palegreen;
}
input:invalid:focus {
border-color: salmon;
}