禁用CSS的选择器无法正常工作

Question

我正在尝试更新按钮的背景颜色，如果input[type="file"]已禁用，但它无效。

任何解决方案？

.btn-file {
  display: inline-block;
  margin: auto 10px;
  vertical-align: top;
  width: auto;
}

.btn-file input[type="file"] {
  display: none;
}

.btn-file input[type="file"]:disabled+.custom-file-upload {
  opacity: 0.5;
}

.btn-file .custom-file-upload {
  background-color: #6692b0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  padding: 10px 18px;
  cursor: pointer;
  width: auto;
}

<div class="btn-file">
  <label for="FileUpload1" class="custom-file-upload">
      <i class="fa fa-upload"></i> Upload Logo
  </label>
  <input type="file" id="FileUpload1" class="" disabled="">
</div>

https://jsfiddle.net/fnkmmLbs/1/

Answer 1

问题在于css +选择器表示下一个兄弟，但所需的元素先前不是下一个。切换订单。 <input>的{​​{1}}。

<label>