[分享]css中checkbox如何变成圆形

CSS中的复选框（checkbox）是一个很常见的表单组件，但是默认的样式却很难看。为了美化复选框，我们可以使用CSS样式来将方框复选框变成圆形的复选框。input { webkitappearanc...

CSS中的复选框（checkbox）是一个很常见的表单组件，但是默认的样式却很难看。为了美化复选框，我们可以使用CSS样式来将方框复选框变成圆形的复选框。

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

input[type="checkbox"]:checked {
  background-color: #2196f3;
  border-color: #2196f3;
} 

代码解释：

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  // 去除默认样式
  width: 20px;
  height: 20px;
  border-radius: 50%;
  // 定义圆形样式
  border: 2px solid #ccc;
  outline: none;
  // 定义边框样式
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  // 添加过渡动画
}

input[type="checkbox"]:checked {
  background-color: #2196f3;
  border-color: #2196f3;
  // 添加选中状态样式
} 

最终效果如下：

现在你已经知道了如何将方框复选框变成圆形的复选框，是不是美观了很多呢？