我创造自己的解决方案，没有标签

input[type=checkbox] { position: relative; cursor: pointer; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 16px; height: 16px; top: 0; left: 0; border: 2px solid #555555; border-radius: 3px; background-color: white; } input[type=checkbox]:checked:after { content: ""; display: block; width: 5px; height: 10px; border: solid black; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 6px; } <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a">

input[type=checkbox] { position: relative; cursor: pointer; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: 0; left: 0; background-color:#e9e9e9; } input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: 0; left: 0; background-color:#1E80EF; } input[type=checkbox]:checked:after { content: ""; display: block; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 6px; } <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a">

使用css2，你可以这样做:

input[type='checkbox'] { ... }

到目前为止，这应该得到了相当广泛的支持。参见浏览器支持

你可以通过以下方法应用到特定属性:

input[type="checkbox"] {...}

这里有解释。

你可以使用这个选择器将你的样式应用到复选框输入:

input[type='checkbox']{}

但不幸的是，它不支持自定义样式，所以你可以使用“after”和“before”来覆盖原始输入: 参见:演示

HTML

 <input
    type="checkbox"
    style="background-color: #d81b60; color: #fff"
    name="checkboxGreen"
  />

CSS

input[type='checkbox'] {
      position: relative;
      cursor: pointer;
      margin: 20px;
 }
 input[type='checkbox']:before {
      content: '';
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 50%;
      background-color: inherit;
      outline: 1px rgba(255, 255, 255, 0.2) solid;
      transform: translate(-50%, -50%);
 }
 input[type='checkbox']:checked:before {     
      content: '';
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 50%;
      background-color: inherit;
      outline: 1px rgba(255, 255, 255, 0.2) solid;
      transform: translate(-50%, -50%);
      box-shadow: 0px 0px 4px 1px #fff;
 }
 input[type='checkbox']:checked:after {
      content: '';
      display: block;
      width: 6px;
      height: 10px;
      border: solid;
      border-width: 0 2px 2px 0;
      border-color: inherit;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
 }

结果:

感谢所有对这篇文章做出贡献的人。 看看我使用纯CSS完成了什么。

input[type=checkbox] { position: absolute; cursor: pointer; width: 0px; height: 0px; } input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; width: 34px; height: 34px; border: 4px solid #FFCB9A; border-radius: 20px; background-color: #445768; transition: all 0.2s linear; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 34px; height: 34px; border: 4px solid #FFCB9A; border-radius: 3px; background-color: #445768; } input[type=checkbox]:after { content: ""; display: block; width: 0px; height: 0px; border: solid #FFCB9A; border-width: 0 0px 0px 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 0px; left: 50px; transition: all 0.2s linear; } input[type=checkbox]:checked:after { content: ""; display: block; width: 12px; height: 21px; border: solid #FFCB9A; border-width: 0 5px 5px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 14px; } <input type="checkbox">

总结

因此，下面控制实际的复选框，我们通过添加h:0和w:0来隐藏它。

input[type=checkbox] {...}

其余部分控制虚拟复选框。

当勾选时，它控制虚拟复选框的背景。

input[type=checkbox]:checked:before {...}

当未选中复选框时，这将控制虚拟复选框的背景。

input[type=checkbox]:before {...}

当未选中复选框时，这将控制虚拟复选框的前台。

input[type=checkbox]:after {...}

当勾选时，它控制虚拟复选框的前台。

input[type=checkbox]:checked:after {...}

我真的希望它能像帮助我一样帮助你:)

课程也很好用，比如:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>