html - 如何修改 CSS 复选框标签以包含 'required' 函数

Question

我创建了一个 CSS 复选框。它基于我精简的 CodePen 脚本，但我找不到如何针对“必需”复选框修改它。我能做的最好的事情就是在“悬停”时更改框阴影的颜色，但这是我能做到的最接近的。

这是我的:

.checkbox1 {
  width: 25px;
  margin: 20px 100px;
  position: relative;
}

.checkbox1 label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  background: linear-gradient(#ffffff, #dddddd 80%);
  border: 0.5px solid #7d878d;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.checkbox1 label:after {
  opacity: 0.0;
  content: '';
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 1px;
  left: 2px;
  border: 3px solid #ff6600;
  border-top: none;
  border-right: none;
  transform: rotate(-50deg);
}

.checkbox1 label::after {
  opacity: 0.0;
}

.checkbox1 input[type=checkbox]:checked+label:after {
  opacity: 5;
}

.checkbox2 {
  width: 25px;
  margin: 20px 100px;
  position: relative;
}

.checkbox2 label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  background: linear-gradient(#ffffff, #dddddd 80%);
  border: 0.5px solid #7d878d;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.checkbox2 label:after {
  opacity: 0.0;
  content: '';
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 1px;
  left: 2px;
  border: 3px solid #ff6600;
  border-top: none;
  border-right: none;
  transform: rotate(-50deg);
}

.checkbox2 label::after {
  opacity: 0.0;
}

.checkbox2 label:hover {
  box-shadow: 0px 0px 4px 0px #ff0000;
  opacity: 5;
}

.checkbox2 input[type=checkbox]:checked+label:after {
  opacity: 5;
}

<div class="checkbox1">
  <input type="checkbox" value="1" id="input1" name="" />
  <label for="input1"></label>
</div>

<div class="checkbox2">
  <input type="checkbox" value="2" id="input2" name="" required="" />
  <label for="input2"></label>
</div>

Answer 1

使用[required] 选中具有required 属性的复选框，然后根据是否选中来制作样式。

我已经编辑了您的原始代码以在下面的演示中显示此功能。我已向 CSS 添加注释以显示我进行了更改的位置。

如您所见，第二个复选框被标记为“必填”。因此，应用了 [required] 初始样式(红色框阴影)。选中后，将应用 [required]:checked 样式。

.checkbox1 {
  width: 25px;
  margin: 20px 100px;
  position: relative;
}

.checkbox1 label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  background: linear-gradient(#ffffff, #dddddd 80%);
  border: 0.5px solid #7d878d;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.checkbox1 label:after {
  opacity: 0.0;
  content: '';
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 1px;
  left: 2px;
  border: 3px solid #ff6600;
  border-top: none;
  border-right: none;
  transform: rotate(-50deg);
}

.checkbox1 label::after {
  opacity: 0.0;
}

.checkbox1 input[type=checkbox]:checked+label:after {
  opacity: 5;
}

.checkbox2 {
  width: 25px;
  margin: 20px 100px;
  position: relative;
}

.checkbox2 label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  background: linear-gradient(#ffffff, #dddddd 80%);
  border: 0.5px solid #7d878d;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.checkbox2 label:after {
  opacity: 0.0;
  content: '';
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 1px;
  left: 2px;
  border: 3px solid #ff6600;
  border-top: none;
  border-right: none;
  transform: rotate(-50deg);
}

.checkbox2 label::after {
  opacity: 0.0;
}

/* Here, we set the default style of an UNCHECKED REQUIRED checkbox */
.checkbox2 input[type="checkbox"][required]+label {
  box-shadow: 0px 0px 4px 0px #ff0000;
  opacity: 5;
}

/* Now, we set the style of a CHECK REQUIRED checkbox */
.checkbox2 input[type="checkbox"][required]:checked+label {
  box-shadow: 0px 0px 0px 0px transparent !important; /* Remove the box-shadow */
}

.checkbox2 input[type=checkbox]:checked+label:after {
  opacity: 5;
}

<div class="checkbox1">
  <input type="checkbox" value="1" id="input1" name="" />
  <label for="input1"></label>
</div>

<div class="checkbox2">
  <input type="checkbox" value="2" id="input2" name="" required="" />
  <label for="input2"></label>
</div>