使用CSS3的HTML5输入验证图像

我目前正在开发HTML5表单，并使用CSS3进行样式设计。我为input:required和input:valid和input:invalid添加了CSS，以使图像显示在文本框中

必需的CSS和无效的CSS都可以正常工作，但由于某些原因，input:valid被忽略，并被替换为与input:required相同的图像

下面是我使用的CSS

input:required.fields, textarea:required.fields, select:required.fields
{
    background:url("images/asterix.png") no-repeat;
    background-position: right;
    width: 200px;
    background-color: white;
}


input:focus:required:invalid.fields, textarea:focus:invalid.fields, select:focus:invalid.fields
{
    background:url("images/error.png") no-repeat;
    background-position: right;
    width: 200px;
    background-color: white;
    opacity: 1.0;
}

上面两个CSS部分都可以正常工作，没有任何问题，但是下面的CSS由于某种原因无法正常工作

input:valid.fields, textarea:required:valid.fields, select:value.fields
{
    background:url("images/tick.png");
    background-position: right;
    width: 200px;
    background-color: white;
    opacity: 1.0;
}

如果是因为找不到图像，我将无效图像设置为tick.png图像，这样做效果很好，但似乎从未调用有效部分

---

感谢您提供的帮助。

我刚刚在表格中使用了以下内容：

输入[必需]：无效{
背景：#efdee0 url（../images/invalid.png）右中无重复；
}
输入[必需]：有效{
背景：#f3f8ed url（../images/valid.png）不在中间偏右重复；
}

但是我的字段都是必填的(http://www.paul-ellis.co.uk/contact.htm)