Question

我目前正在处理HTML5表单并使用CSS3进行样式设置。我为输入添加了CSS：required和input：valid和input：invalid使图像显示在文本框内。

必需和无效的CSS都可以正常工作，但出于某种原因输入：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图像，这样可以正常工作，但有效部分似乎永远不会被调用。

感谢您提供的任何帮助。

Answer 1

我刚才在表单上使用了以下内容：

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

但是我的字段都是必需的（http://www.paul-ellis.co.uk/contact.htm）

使用CSS3的HTML5输入验证图像

1 个答案: