html - 启用或禁用输入文件时从 CSS 更改标签颜色

Question

<div class="uploadImgParent">
    <label id="uploadImgButton" for="license" class="uploadImgButton">
         Upload
         <input type="file" id="license" accept="image/*"/>
    </label>
</div>

我有这段代码显示一个标签(上传)而不是带有 input type="file" 标签的标准按钮(输入被 css 隐藏，所以我只能显示上传的标签)。现在我希望标签的背景在启用或禁用按钮时改变颜色

现在背景颜色的 css 是:

.uploadImgButton{
        color: Black;                   
        background-color: Grey;
        padding: 10px;
        border: double 4px #AAAAAA;
}

现在我用JS控制它，但我只想用CSS改变颜色，有什么快速的方法吗？喜欢:

label:enabled{color: red;}  label:disabled{color:grey;}

Answer 1

您可以使用 adjacent sibling combinator 使用 CSS 来完成此操作，但您必须更改布局:

.uploadImgParent {
  display: flex;
  flex-direction: row-reverse;
}
.uploadImgInput {
  margin-right: auto;
}

/* Target labels that goes immediately after ALL inputs */
.uploadImgInput + .uploadImgLabel {
  color: green;
}

/* Target all labels that goes immediately after DISABLED inputs */
.uploadImgInput:disabled + .uploadImgLabel {
  color: red;
}

<div class="uploadImgParent">
    <input class="uploadImgInput" type="file" id="license1" />
    <label class="uploadImgLabel" for="license1">Upload</label>
</div>

<div class="uploadImgParent">
    <input class="uploadImgInput" type="file" id="license2" disabled />
    <label class="uploadImgLabel" for="license2">Upload</label> 
</div>