：：有效+：表单上的webfonts无效

Question

我使用的是:有效值和:无效伪类，这样用户就可以看到每个表单中的输入是否正确。我能够用CSS对它们进行样式化，但我还没有找到一个解决方案，可以在表单的右侧使用图标字体来显示有效或无效的输入。有人知道怎么做吗？

另外，在用户开始输入之前，某些表单不应该显示有效或无效(比如注册电子邮件)。我能绕过这个代码/css，在用户开始输入表单时激活它吗？

Answer 1

你可以意识到你想要的是什么

小提琴

input {
    border: #666 1px solid;    
    padding: 0.5em;
}

label {
    display: block;
    margin-top: 8px;
}

input + i:before {
    display: none;
}

input:focus + i:before {
    display: block;
}

input:focus:invalid {
    background: red;
}

input:focus:valid {
    background: lightgreen;
}

input:focus:valid + i:before {
    content: "\f14a";
}

这里我使用了火锅图标字体。

编辑

要在表单元素中创建图标，可以添加以下规则：

input + i {
    position: relative;
    left: -20px;
}