在 HTML 5 中，我们可以将输入标记为 required，然后使用 CSS 中的 [required] 伪选择器选择它们。但我只想在他们尝试提交表单而不填写所需元素时为其设置样式。有这个选择器吗？弹出的小消息框怎么样？
【问题讨论】：
标签： html css validation 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 类应该不是问题。 :)
【讨论】：
[required] 相同的问题。
我已经使用 JavaScript 将 .validated 类应用于提交时的表单，然后使用该类设置 :invalid 字段的样式，例如：
.validated input:invalid {
...
}
这种方式字段不会在页面加载时显示为无效，只有在提交表单之后。
理想情况下，提交时将有一个伪类应用于表单。
【讨论】：
$('input[required]').on 'keyup', -> $(this).addClass('validate-me').off('keyup') 然后为input[required].validate-me:invalid 等添加 CSS 样式
CSS Selectors 4 working draft 中有一个 :user-error 伪类可以做到这一点，同时触发输入模糊和表单提交。
与此同时，我个人使用了很棒的 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. */
}
在 chrome 中进行了尝试和测试。我没有在任何其他浏览器中测试过。
【讨论】：
此解决方案将通过属性而为空所需的输入字段设置样式。当在 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;
}
【讨论】：