CSS设置复选框、单选框样式

HTML

CSS

1、需要取消单选框自身样式

.check {
  display: inline-block;
  vertical-align:middle;
  appearance: none;    /* 取消自身块样式*/
  font-weight: 500;
  color:#00f;
}

2、使用伪元素完成复选框样式

.check::after{        /* 伪元素样式即边框样式 */
  display: block;
  content:'';        /* 未选中样式 */
  width:1em;
  height: 1em;
  text-align: center;
  border:1.6px solid #00f;
  border-radius: 2px;
}
.check:checked::after{
  content:'\2714';    /* 选中时样式，这里使用content编码--对号 */
}