使用蒙版覆盖

​

label {
  display: block;
  border: 4px solid #88a;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) inset;
  border-radius: 10%;
  width: 1em;
  height: 1em;
input {
  display: none;
input:checked + label {
  background-color: rgba(0, 255, 0, .8);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, .1) inset;
}

<input type="checkbox" id="chk">
<label for="chk"></label>

​

我认为最好的方法是将单选/复选框包装在span、div (随便什么)中，然后有一个带有for属性的标签链接到输入的id。

然后使用隐藏输入，并随心所欲地设置标签的样式。(注意，一个输入可以有多个标签)。

您可以使用之前或之后添加复选标记。

​

.styled-radio {
  ;
  
  z-index:-2;
.styled-radio-label {
  border:1px solid #ccc;
  height:15px;
  width:15px;
  position:relative;
.styled-radio:checked + .styled-radio-label:after {
  content:'\2713';
  
  left:50%;
  top:50%;
  transform:translateY(-50%) translateX(-50%);
label {
  display:inline-block;
  vertical-align:middle;
}

<span>
  <input type='radio' id='html' value='html' class='styled-radio' name='lang'/>
  <label for='html' class='styled-radio-label'></label>
  <label for='html'>HTML</label>
</span>
  <input type='radio' id='css' value='css' class='styled-radio' name='lang'/>
  <label for='css' class='styled-radio-label'></label>
  <label for='css'>CSS</label>
</span>
  <input type='radio' id='JS' value='JS' class='styled-radio' name='lang'/>