Question

我想创建一些现代表单，首先使用动画标签作为占位符，然后使用CSS过渡作为条形图。

/* USED STYLING */
input:focus ~ label,
input:valid ~ label,
input:invalid {
    top: -15px;
    color: #00bfff;
    font-size: 12px;
    font-weight: bold;
}

input:focus ~ span,
input:valid ~ span {
    width: 100%;
}

/* VALID/INVALID STYLING */
input:valid ~ label {
    color: #01df01;
}
input:valid ~ span {
    background-color: #01df01;
}

/* set invalid (not empty) styling here */

here's a fiddle

正如您所看到的，除邮件输入外，它的效果非常好。

现在有什么方法可以使用纯CSS处理非空邮件输入上的有效/无效状态吗？

我知道最常用的选项是将邮件输入的类型设置为文本，并使用js或jQuery进行验证检查。我通常以同样的方式做到这一点，但有一点困扰我作为移动用户（iOS）很长一段时间。键盘改变了。那不是真正的改变本身，而是如果输入是文本，则第一个字母的自动更正设置为大写。

好吧也许我对此有点挑剔但是事情是在文本输入中放置一个邮件地址是不是正确的现代html的语义不是吗？

谢谢和问候帕特里克

处理：非空邮件输入纯CSS的无效伪类

0 个答案: