我正在使用Topcoat CSS庫。你可以看到我有here問題的代碼片段。帶冒號的CSS類
在樣式表中，有下列把一個紅色邊框的輸入無效時：
.topcoat-text-input--large:invalid {
border: 1px solid #ec514e;
}
我的HTML是：
<input type="text" class="topcoat-text-input--large" id="email" placeholder="email" value="<%= model.email %>">
如何設置輸入使用CSS無效？如果我改變類的輸入來源：
topcoat-text-input--large
到
topcoat-text-input--large:invalid
我不明白的紅色邊框。那麼任何想法如何使用這個CSS？
當pattern輸入屬性不匹配時，將觸發:invalid僞類。
在鏈接的例子：
<input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">
如果鍵入「不失敗」入禁區，它會變成藍色。如果輸入其他任何內容，則與pattern不符，並且爲invalid。
欲瞭解更多信息，請參閱關於pattern的MDN文章。
控制值被檢查的正則表達式。該模式必須匹配整個值，而不僅僅是一些子集。使用title屬性來描述模式以幫助用戶。此屬性適用於type屬性值爲text，search，tel，url或email的情況;否則會被忽略。正則表達式語言與JavaScript的相同。該圖案未被正斜線包圍。
該選擇器的無效部分不是該類的一部分，而是一個名爲pseudo class的東西。在:invalid的情況下，它僅當激活（來自MDN）：
一個
<input>或<form>元件，其內容不根據被輸入的類型設置，以驗證。