Question

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

基本上，我使用CSS设置默认的复选框样式。它会很有效，直到您尝试选中复选框。

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

你知道问题出在哪里吗？在我看来，问题是＆＃34;输入[type =＆＃34; checkbox＆＃34;]：check .check-box-effect {＆＃34;开始。

请找到以下代码

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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，如果它是该复选框的子项。

Checkbox CSS：检查样式

2 个答案: