HTML5 Проверка ввода изображений с помощью CSS3

Question

В настоящее время я работаю над формой HTML5 и использую CSS3 для стилизации. Я добавил 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, и это работало нормально, но действительный раздел никогда не вызывался.

Спасибо за любую помощь, которую вы можете предоставить.

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)