Html 当输入有文本时更改标签样式

我希望在输入尚未输入时隐藏标签，因为我有占位符文本，但一旦输入，我希望通过更改不透明度来显示标签

标签{
显示：块；
颜色：rgba（146,20,34,0）；
文本对齐：左对齐；
保证金：0；
左：12.2%；
字体大小：75%；
}

全名


客户编号

您只需向标签添加一个类/属性即可确定它是否隐藏。然后，用JS检查输入是否通过

input

事件输入

const inputs=document.querySelectorAll（'input[type=“text”]”）；
[].forEach.call（输入，输入=>{
const label=document.querySelector（`[for=“${input.id}]”`）；
addEventListener（'input'，function（）{
if（this.value&&this.value.length>0）{
label.removeAttribute（“隐藏”）；
}否则{
label.setAttribute（'hidden'，''）；
}
});
});
*，
*：之前，
*：之后{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
背景色：#fff；
填充：50px 50px；
}
.组{
显示：内联块；
宽度：200px；
}
.组标签，.组输入{
显示：块；
字体系列：“开放式SAN”；
过渡：所有.23秒轻松；
宽度：100%；
}
.组标签{
颜色：#555；
字体大小：15px；
字号：600；
}
.小组输入{
边框：1px实心#ddd；
边界半径：3px；
颜色：#555；
字体大小：14px；
高度：35px；
边缘顶部：5px；
填充：0 8px；
}
.小组输入：焦点{
边框颜色：#00bbff；
盒影：0 0 5px 1px rgba（0188255，.25）；
大纲：无；
}
标签[隐藏]{
不透明度：0；
可见性：隐藏；
}

全名
地址
在HTML中添加一个
标记，并使用以下javascript：

function setVisible(text) {
    var labels = document.getElementsByTagName("LABEL");
    for(var i = 0; i < labels.length; i++) {
         if(labels[i].innerHTML == text) {
             labels[i].style.color = "black";
         }
    }
}

最终结果应如下所示：


标签{
显示：块；
颜色：rgba（146,20,34,0）；
文本对齐：左对齐；
保证金：0；
左：12.2%；
字体大小：75%；
}
全名


客户编号
函数setVisible（文本）{
var labels=document.getElementsByTagName（“标签”）；
对于（变量i=0；i
这是一个仅限于CSS的答案，它可能会引起人们的兴趣


body{padding:10px；}
输入：显示占位符+标签{
边框：2px实心红色；/*仅当输入为空时才显示红色边框*/
}

全名


客户编号
您必须使用JS，您不能用CSW检查输入的值。我必须为每个输入及其标签使用单独的函数，或者是否有方法检测输入的标签？看看这个答案。。。。实际上，等等，这可能是错误的做法–您需要使用文本设置默认样式，然后在出现文本框时进行覆盖empty@JDB你能通过给我们看一些例子来更好地解释这一点吗？@SauravRastogi这里是jsfiddle，我猜我将不得不使用javascript来检测它，但我还不太擅长编写js。我也不想为每个标签和输入编写单独的函数，因为在我的实际网站上还有大约8个输入。谢谢，这正是我想要的。有没有一种简单的方法可以将其扩展到更多的输入和标签，或者我必须为每个输入和标签编写一个类似的函数？谢谢，这非常有帮助！
onchange="setVisible(this.placeholder)"