CSS5輸入驗證圖像

我目前正在研究HTML5表單並使用CSS3進行樣式設計。我已經添加了CSS輸入：必需和輸入：有效和輸入：無效，使圖像顯示在文本框內。CSS5輸入驗證圖像

所需的CSS和無效的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出於某種原因不能正常工作的任何問題的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圖像，這工作得很好，但有效的部分似乎永遠不會被調用。

感謝您提供的任何幫助。

來源

2011-08-25 Boardy

我只是用我的形式如下：

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）

來源

2012-08-08 12:13:42 Paul

CSS5輸入驗證圖像

回答

相關問題