Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 带有冒号的CSS类_Javascript_Css - Fatal编程技术网
Fatal编程技术网

Javascript 带有冒号的CSS类

javascript css

Javascript 带有冒号的CSS类,javascript,css,Javascript,Css,我正在使用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:invalid {
  border: 1px solid #ec514e;
}
我的html是：

<input type="text" class="topcoat-text-input--large" id="email" placeholder="email" value="<%= model.email %>">
到

我不明白红色的边界。你知道如何使用这个CSS吗？

当
模式
输入属性不匹配时，会触发
：invalid
伪类

在链接的示例中：

<input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">
如果在框中键入“未失败”，它将变为蓝色。如果键入其他内容，则它与
模式不匹配，并且
无效

有关更多信息，请参阅上的MDN文章

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


选择器的：无效部分不是类的一部分，而是称为
伪类的部分。如果
：无效
，它仅在以下情况下激活（从MDN）：

根据输入的类型设置，其内容无法验证的
或
元素




topcoat-text-input--large:invalid



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