HTML5 + CSS3 + Firefox問題

Question

我有以下問題。我試圖在我的項目http://designscrazed.org/css-html-login-form-templates/上運行這個例子。

這裏是我的HTML：

<p id="firstname_line"> 
    <label>First Name:</label> 
    <input type="text" name="firstname" id="firstname" required pattern="^[a-zA-Z]+$"><span title="Name should contain only letters!"></span> 
</p> 

我的CSS：

#firstname_line input:invalid ~ span:after { 
    opacity: 1; 
    color:green; 
} 
#firstname_line input ~ span:after { 
    content:attr(title); 
    color:red; 
    margin-left:.6rem; 
    opacity: 0; 
    transition: 1s 1s opacity linear; 
} 
#firstname_line span { 
    color: red; 
    display: block; 
} 

當我嘗試應用在我的項目的例子，我對所有的瀏覽器一個奇怪的問題。 在加載時，如果輸入字段爲空，則應該將其視爲「：valid」字段或非「：invalid」，並且CSS類＃firstname_line輸入：invalid〜span：之後不應該應用。除此之外，#firstname_line輸入：無效〜跨度：在和之後#firstname_line輸入〜跨度：{應用在負載上並且可見。正如您在示例中看到的那樣，加載時不應該可見。

有人可以請提出問題在哪裏？

Answer 1

讓我們先來簡化：

div input ~ span:after { 
 
    content: attr(title); 
 
    display: none; 
 
} 
 

 
div input:invalid ~ span:after { 
 
    display: inline; 
 
    color: red; 
 
}

<div> 
 
    <input type="text" required pattern="^[a-zA-Z]+$"> 
 
    <span title="Name should contain only letters!"></span> 
 
</div>

原因跨度的拿起:invalid僞選擇的造型是因爲輸入的required屬性使得最初空白字段無效。

刪除required屬性，並且:invalid僞選擇器將不會拾取空白字段值。

div input ~ span:after { 
 
    content: attr(title); 
 
    display: none; 
 
} 
 

 
div input:invalid ~ span:after { 
 
    display: inline; 
 
    color: red; 
 
}

<div> 
 
    <input type="text" pattern="^[a-zA-Z]+$"> 
 
    <span title="Name should contain only letters!"></span> 
 
</div>

這種解決方案的問題是現場不再需要提交表單。如果字段值留空，則不會執行正則表達式測試，表單將提交。

純CSS無法確定字段值是否爲空或超出頁面的初始加載（DOM不會更新爲用戶類型）。這是爲什麼使用Javascript是驗證表單客戶端更安全/更清潔/更可靠的原因。