Question

我有一个Web表单，其中需要一些输入字段，一些是可选的。我可以按照我的预期给出样式所需的字段，但不能选择那些字段。

当可选字段具有有效输入时，它将变为绿色（例如）。它适用于此代码

input:optional:valid{
background: #AAB69B
}

但通常像第一次加载时一样，它们将采用另一种颜色。为此，我正在尝试此代码

input:optional{
background: #f19999 
}

但这不起作用。没有输入时，我无法选择可选字段。不幸的是，没有输入值，他们获得了我为有效输入设置的背景。当我开始输入时，它会得到我预期的无效背景。当输入有效时，该字段获得有效的背景（它可以工作）。

请帮忙！

演示链接：http://bdlance.byethost9.com/front-end%20form%20validation%20with%20html5/

Answer 1

看一下您的表单样式，我发现valid和invalid伪类的背景颜色相似：

input:required:invalid, textarea:required:invalid{
    background: #AAB69B; // same
}
input:required:focus:invalid, textarea:focus:invalid{
    background: #AAB69B; // same
}
input:required:valid, textarea:required:valid{
    background: #AAB69B; // same
}
input:optional, select {
    background: #f19999;
}
input:optional:valid{
    background: #AAB69B; // same
}

请改为尝试：

input:required:invalid, textarea:required:invalid{
    background: #f19999;
}
input:required:focus:invalid, textarea:focus:invalid{
    background: #f19999;
}
input:required:valid, textarea:required:valid{
    background: #AAB69B;
}
input:optional, select {
    background: #f19999;
}
input:optional:valid{
    background: #AAB69B;
}

很抱歉，但您的CSS文件并不是最好的，请花更多时间学习CSS。这里有一些很好的资源（订单很重要）：

样式化可选输入字段

1 个答案: