html - 输入检查状态不影响 css 选择器

Question

所以我一直在尝试通过复选框状态触发我的 CSS 选择器，如下所示，但我没有成功触发它。单击时应该发生的是勾号应该消失。

.i-cb input[type="checkbox"]:checked + label::before {
   display: none;
   width:0px;
   height: 0px;
}

JSFiddle:https://jsfiddle.net/7tnepc8r/4/

Answer 1

顺序有问题

您应该更改 HTML 的顺序。

+ 选择器用于选择紧跟在第一个指定元素之后(而非内部)的元素。

.i-cb input[type=checkbox] {
  visibility: hidden;
}

.i-cb label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 4px solid #48c8f1;
  border-radius: 50%;
  border-top-color: transparent;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 0;
}

.i-cb label::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 45px;
  background-color: #93c83d;
  left: 22px;
  top: -15px;
  z-index: 1;
}

.i-cb label::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 6px;
  background-color: #93c83d;
  left: 10px;
  top: 24px;
  z-index: 1;
}

.i-cb input[type=checkbox]:checked + label::after {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
} 

.i-cb input[type=checkbox]:checked + label::before {
  display: none;
  width: 0px;
  height: 0px;
}

<div class="i-cb">
  <input id="check" type="checkbox" />
  <label for="check"></label>
</div>