Изменить цвет метки с CSS, когда входной файл включен или отключен

Question

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

У меня есть этот код, который показывает метку (Upload) вместо стандартной кнопки с меткой для input type="file" (ввод скрыт css, поэтому я могу показать только метку Upload).Теперь я хочу, чтобы фон метки менял цвет, когда кнопка включена или отключена.

CSS для цвета фона теперь таков:Я хочу изменить цвет только с помощью CSS, есть какой-нибудь быстрый способ?Нравится:

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

Answer 1

Вы можете сделать это с помощью 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>