如何修改 CSS 复选框标签以包含“必需”功能答案

【问题标题】：How do I modify a CSS checkbox label to include a 'required' function如何修改 CSS 复选框标签以包含“必需”功能
【发布时间】：2017-06-26 22:26:22
【问题描述】：

我创建了一个 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>

【问题讨论】：

要求，你的意思是你需要一些动作来停止，除非复选框被选中？
感谢您的回复。当您取消选中选中的复选框时，我希望 css 复选框的行为与默认的 html“必需”复选框一样。也就是说，将 box-shadow 更改为红色以表示这是必需的操作 - 必须选中该框才能继续。重新选中该框后，框阴影的红色将被取消。

标签： html css checkbox

【解决方案1】：

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

我已经编辑了您的原始代码，以在下面的演示中展示它的工作原理。我在 CSS 中添加了 cmets 以显示我所做的更改。

如您所见，第二个复选框被标记为“必填”。因此，[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>

【讨论】：

感谢您的回复。感谢您花时间考虑和回答我的问题。我可以在哪里阅读这种类型的详细复选框“必需”样式 - 以更好地了解 css 样式。是否可以修改您的脚本，使“必需”复选框的行为类似于默认的“必需”html 复选框：首次加载时不显示红色框阴影，仅在更改后显示红色框阴影选中为未选中，或者用户尝试继续而不选中“必需”复选框。再次提前感谢您。
@Robert 你想做的事情用纯 CSS 是不可能的——你需要结合 JavaScript 来观察复选框何时没有焦点（又名：“模糊”）。 jQuery 有一个功能。
谢谢。我将阅读有关 JavaScript 和 jQuery 的内容，并让您知道我的进展情况，但可能需要一段时间......
我找到了一个 Javascript，它帮助link 进行了修改，我让它工作了。但正如你所见，它不是完整的答案。

我想解决这个难题。任何进一步的建议，将不胜感激。提前谢谢你。