复选框 CSS ：检查样式

Question

我试图了解我的 CSS 中的问题出在哪里，但我真的不知道出了什么问题。

基本上，我使用 CSS 设置默认复选框样式。在您尝试选中该复选框之前，它运行良好。

我的代码背后的想法是，当您选中复选框时，它应该增加大小并将背景颜色更改为红色。此外，它应该保持样式直到您取消选中该框（手动）。

你知道问题出在哪里吗？在我看来，问题出在 "input[type="checkbox"]:checked .check-box-effect {" 开始的地方。

请在下面找到代码

label {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  position: relative;
}

label .check-box-effect {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: 2px solid #dcdcdc;
  border-radius: 10%;
}

label .check-box-effect:before {
  content: "";
  width: 0px;
  height: 2px;
  border-radius: 2px;
  background: #626262;
  position: absolute;
  transform: rotate(45deg);
  top: 13px;
  left: 9px;
  transition: width 50ms ease 50ms;
  transform-origin: 0% 0%;
}

label .check-box-effect:after {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #626262;
  position: absolute;
  transform: rotate(305deg);
  top: 16px;
  left: 10px;
  transition: width 50ms ease;
  transform-origin: 0% 0%;
}

label:hover .check-box-effect:before {
  width: 5px;
  transition: width 100ms ease;
}

label:hover .check-box-effect:after {
  width: 10px;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked .check-box-effect {
  background-color: red !important;
  transform: scale(1.25);
}

input[type="checkbox"]:checked .check-box-effect:after {
  width: 10px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked .check-box-effect:before {
  width: 5px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked:hover .check-box-effect {
  background-color: #dcdcdc;
  transform: scale(1.25);
}

input[type="checkbox"]:checked:hover .check-box-effect:after {
  width: 10px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked:hover .check-box-effect:before {
  width: 5px;
  background: #333;
  transition: width 150ms ease 100ms;
}

<label>     
          <input type="checkbox" id="chkProdTomove"  />
          <span class="check-box-effect"></span>
        </label>

Answer 1

您需要将所有选中的选择器更改为：

input[type="checkbox"]:checked + .check-box-effect:before

label {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  position: relative;
}

label .check-box-effect {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: 2px solid #dcdcdc;
  border-radius: 10%;
}

label .check-box-effect:before {
  content: "";
  width: 0px;
  height: 2px;
  border-radius: 2px;
  background: #626262;
  position: absolute;
  transform: rotate(45deg);
  top: 13px;
  left: 9px;
  transition: width 50ms ease 50ms;
  transform-origin: 0% 0%;
}

label .check-box-effect:after {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #626262;
  position: absolute;
  transform: rotate(305deg);
  top: 16px;
  left: 10px;
  transition: width 50ms ease;
  transform-origin: 0% 0%;
}

label:hover .check-box-effect:before {
  width: 5px;
  transition: width 100ms ease;
}

label:hover .check-box-effect:after {
  width: 10px;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .check-box-effect {
  background-color: red !important;
  transform: scale(1.25);
}

input[type="checkbox"]:checked + .check-box-effect:after {
  width: 10px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked + .check-box-effect:before {
  width: 5px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked:hover + .check-box-effect {
  background-color: #dcdcdc;
  transform: scale(1.25);
}

input[type="checkbox"]:checked:hover + .check-box-effect:after {
  width: 10px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked:hover + .check-box-effect:before {
  width: 5px;
  background: #333;
  transition: width 150ms ease 100ms;
}

<label>     
          <input type="checkbox" id="chkProdTomove"  />
          <span class="check-box-effect"></span>
        </label>

Answer 2

选中复选框时，您需要定位下一个元素：

input[type="checkbox"]:checked + .check-box-effect {
  background-color: red !important;
  transform: scale(1.25);
}

如果.check-box-effect 是复选框的子项，则您当前的代码正在尝试定位它。