css - HTML5 输入表单 - 仅在错误或模式不匹配时显示跨度

Question

想使用 HTML5 和 CSS 处理输入表单错误 - 没有 JS。

目前，我将跨度设置为不可见，直到输入有效。但是，输入文本字段的默认状态为空白，因此无效，默认情况下跨度可见。

HTML:

 <input class="form-control" placeholder="#####" 
 name="zip" pattern="\d{5}"  title="Enter valid 5 digit zip" 
 required><span class="formhelp">5 digit ZIP required</span> 

CSS:

.formhelp
   display:none;
   font-size: 70%;

input:invalid + .formhelp
   display:block;

目标是仅在字段失去焦点后模式无效时才显示跨度，而不是默认状态为空。

Answer 1

即使使用伪选择器 empty 也只能使用 CSS 是不可能的:

input:not(:empty):not(:focus):invalid

因为直到现在 CSS 还没有(伪)值选择器，所以空的伪类永远不会选择适当的 HTML 文档中的任何内容。