带冒号的CSS类

CSS class with colon

本文关键字：CSS 更新时间：2023-09-26

我使用的是Topcoat 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">

如果你在框中输入"not-fail"，它会变成蓝色。如果您输入其他任何内容，则它与pattern不匹配，而为invalid。

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

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

选择器的无效部分不是类的一部分，而是称为伪类的东西。在:invalid的情况下，它只在(从MDN):

时激活。

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