我正在使用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>元件，其内容不根据被输入的类型设置，以验证。