改变复选框的默认样式，将其变成圆形，背景色为绿色

我们经常使用input复选框，它有自己的默认样式，很多时候，为了使页面更美观，我们需要修改复选框的样式。通常使用的修改方式有两种，一个是链入图片，另一个是使用纯css的方法进行修改。如果事先有设计好的或下载好的图片，使用链入图片的设计方式会简单些，但是如果只是将复选框的样式改为圆形，背景色改变成自己想要的颜色，运用纯css的方法，也很简单快捷，只需要在css文件中编写以下代码：

input[type='checkbox'] {
  cursor: pointer;
  position: relative;
  width: 1rem;
  height: 1rem;
  font-size: 0.9rem;
  visibility: hidden;
}
input[type='checkbox']::after {
  position: absolute;
  top: 0;
  background-color: #33d883;
  color: #fff;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: ' ';
  border-radius: 50%;
}

input[type='checkbox']:checked::after {
  content: '✓';
  font-size: 0.9rem;
  font-weight: bold;
}

就可以实现以下效果了：