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

Question

我正在使用：valid和：无效的伪类，因此用户可以查看每个表单中的输入是否正确。我可以使用CSS设置它们的样式，但我还没有找到一个解决方案，我可以在窗体的右侧使用iconfont，以显示有效或无效的输入。谁知道怎么做？

在用户开始输入之前，某些表单也不应显示有效或无效（如注册电子邮件）。我可以绕过该代码/ css，并在用户开始输入表单时激活它吗？

Answer 1

你可以实现你想要的东西：

jsfiddle

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

我在这里使用了fontawesome iconfont。

修改

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

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