通过CSS将样式应用于非空的所有输入文本

Question

可以通过CSS3完成吗？

var inputs = document.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; i++)
{
    if (inputs[i].type == "text")
    {
        if (inputs[i].value != "")
        {
            inputs[i].style.borderBottomColor = '#448aff';
        }
    }
}

var textareas = document.getElementsByTagName("TEXTAREA");
for (var i = 0; i < textareas.length; i++)
{
    if (textareas[i].value != "")
    {
        textareas[i].style.borderBottomColor = '#448aff';
    }
}    

我不介意甚至不支持IE10。

Answer 1

textarea:valid,
input:valid {
    border-bottom-color: #448aff;
}

还需要添加pattern=".*?\S.*"（仅对至少一个非空格字符有效）和required属性才能获得thos伪类。您可能还想要自定义:invalid状态。