javascript - 带冒号的 CSS 类

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">

如果您在框中输入“not-fail”，它会变成蓝色。如果您键入任何其他内容，它与 pattern 不匹配并且是 invalid。

有关更多信息，请参阅关于 pattern 的 MDN 文章.

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.