css - CSS Checkboxes，required怎么处理

Question

我正在使用此 HTML 为我自己交换浏览器复选框

input[type="checkbox"] {
  display: none;
  width: 30px;
  &+label {
    width: 30px;
    &::before {
      display: inline-block;
      width: 30px;
      height: 26px;
      margin: 0px;
      vertical-align: middle;
      background: url(../images/tick.png) -30px top no-repeat;
      cursor: pointer;
      content: "";
    }
  }
  &:checked+label::before {
    background: url(../images/tick.png) left top no-repeat;
  }
}

<input required type="checkbox" id="acceptance" name="acceptance" value="yes"><label for="acceptance"></label>

Answer 1

您不需要label. 您可以:before直接将元素添加到复选框输入中（请务必进行跨浏览器检查。不确定兼容性）。

任何兼容 html5 的浏览器都会弹出提示该元素是必需的：

由于我没有图像，我将未选中的颜色更改为红色，将选中的颜色更改为蓝色：

input[type="checkbox"] {
  width: 30px;
}

input[type="checkbox"]::before {
  display: inline-block;
  width: 30px;
  height: 26px;
  margin: 0px;
  vertical-align: middle;
  background: url(../images/tick.png) -30px top no-repeat red;
  cursor: pointer;
  content: "";
}

input[type="checkbox"]:checked::before {
  background: url(../images/tick.png) left top no-repeat blue;
}

<form>
<input required type="checkbox" id="acceptance" name="acceptance" value="yes">
<input type="submit" />
</form>

Answer 2

由于我也遇到这种问题，并找到了更新的解决方案，所以我会在这里分享

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Using_built-in_form_validation

现在我们有了伪:valid类:invalid

例如：

input[type=checkbox]:invalid + label {
   color: red;
}

希望能帮助到你

Answer 3

您:before用于根据复选框:checked设置向标签显示刻度/交叉图像。对:after:

input[type="checkbox"] {
    &[required] + label:after {
        content: "*";
        color: red;
    }
}