Question

我正在使用Topcoat CSS库。您可以看到我遇到here问题的代码段。

在样式表中，有以下内容在无效时在输入周围放置红色边框：

.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？

Answer 1

:invalid输入属性不匹配时会触发pattern伪类。

在链接示例中：

<input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">

如果您键入＆＃34; not-fail＆＃34;进入盒子，它会变成蓝色。如果您输入其他内容，则与pattern不符，并且为invalid。

有关详细信息，请参阅有关pattern的MDN文章。

检查控件值的正则表达式。模式必须匹配整个值，而不仅仅是某个子集。使用title属性来描述帮助用户的模式。当type属性的值为text，search，tel，url或email时，此属性适用;否则会被忽略。正则表达式语言与JavaScript相同。图案没有正斜面包围。

Answer 2

：选择器的无效部分不是类的一部分，而是名为pseudo class的部分。在:invalid的情况下，它仅在（来自MDN）时激活：

<input>或<form>元素，其内容无法根据输入的类型设置进行验证。