HTML5必需的输入样式

在HTML5中，我们可以将输入标记为

required

，然后用CSS中的

[required]

伪选择器选择它们。但我只想在他们试图提交表单而不填写所需元素时设置样式。这个有选择器吗？弹出的小消息框怎么样？

是的，正如SLaks所说，没有CSS选择器来执行此操作。我怀疑这是否会在CSS的范围内，因为CSS需要检查输入的内容

不过，您最好的选择可能是在单击按钮时调用javascript验证函数，而不是实际提交表单。然后检查[required]字段是否有适当的内容，并提交表单或突出显示未填写的必填字段

JQuery有一些很好的插件为您处理这些问题

---

您可以使用：valid和：invalid选择器。像这样的

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

但是，这只适用于支持本机验证的浏览器，并且只适用于有意义的字段。据我所知，现在这只意味着Chrome（可能是Safari，但还没有检查）

因此，通过本机验证，我的意思是，在chrome中，如果您执行

，则字段的值将针对电子邮件类型字符串进行验证（无需任何额外的javascript），因此上述样式将起作用。但是，如果要将它们附加到

type=“text”

字段或第二个密码字段（假设与第一个密码字段匹配），则只会得到绿色，因为所有内容都是有效的，而对于密码，无论如何都没有“type”

---

这基本上意味着要支持所有浏览器，更重要的是，要支持更广泛的验证数组，您仍然必须求助于javascript，在这种情况下，分配.valid/.invalid类应该不是问题。：）

我使用JavaScript在提交表单时将一类

.validated

应用于表单，然后使用该类设置

：无效的
字段，例如：

.validated input:invalid {
  ...
}

这样，只有在表单提交后，字段才会在页面加载时显示为无效

理想情况下，提交时会有一个应用于表单的伪类。
中有一个
：用户错误
伪类将执行此操作，在输入模糊和表单提交时触发

同时，我个人使用的是令人敬畏的方法，包括：用户错误，或者你可以用托比回答的方法自己解决

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. */
}

在铬合金上进行了试验和测试。我还没有在任何其他浏览器中测试过它。
此解决方案将在空白时通过属性设置所需输入字段的样式。当在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;
}

不，那需要Javascript。@SLaks:那有什么意义呢？只要您喜欢默认样式，它就可以工作？有关更多信息，请参阅此问题。在我看来，这些设置是在页面加载时设置的，因此我遇到了与
[必需]
@Xodarap相同的问题，它设置为页面加载，但输入状态从有效变为无效，所以这样做很好。@Johan这样做只会在输入在（in）有效值之间变化时更改样式。不像Xodarp希望的那样-这要求样式设置仅在单击提交后发生在所有其他框上…您还可以执行类似操作以允许实时验证检查：
$（'input[required]'）。在'keyup'上，->$（this）。addClass（'validate-me'）。off（'keyup'）
，然后为
输入添加CSS样式[required].验证我：无效
等这是最好的答案！你的链接上没有插件