使用CSS3的HTML5输入验证图像

Question

I am currently working on an HTML5 form and using CSS3 for the styling. I have added CSS for input:required and input:valid and input:invalid to make an image get shown inside the text box.

Both the required and invalid CSS work fine but for some reason input:valid gets ignored and is just replaced with the same image as input:required.

Below is the CSS that I have used

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;
}

Both CSS sections above work fine without any problems but its the CSS below that for some reason is not working.

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;
}

In case it was to do with the image not being found I made the invalid image be the tick.png image and this worked fine but the valid section never seems to get called.

Thanks for any help you can provide.

Answer 1

I just used the following on my form:

input[required]:invalid {
    background: #efdee0 url(../images/invalid.png) no-repeat center right;
}

input[required]:valid {
    background: #f3f8ed url(../images/valid.png) no-repeat center right;
}

but then my fields are all required (http://www.paul-ellis.co.uk/contact.htm)