css - 通过 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 状态。