checkbox样式变成圆

你可以通过CSS样式来将checkbox样式变成圆形，具体实现方式如下：

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
}

input[type=checkbox]:checked::before {
  content: '\2713';
  display: block;
  text-align: center;
  color: #fff;
}

其中，`-webkit-appearance`，`-moz-appearance`，`appearance` 属性用于去掉原生的checkbox样式，`border-radius` 属性用于将checkbox样式变成圆形，`width` 和 `height` 属性用于设置checkbox的宽度和高度，`border` 属性用于添加边框。

`input[type=checkbox]:checked::before` 用于添加选中状态时的样式，`content` 属性用于添加文本内容，`display` 属性设置为 `block`，以便让文本居中显示，`text-align` 属性用于设置文本水平居中，`color` 属性用于设置文本颜色。

相关问题

支付宝小程序checkbox修改样式

要修改支付宝小程序checkbox的样式，可以使用"behavior"的方式进行修改。下面是一个示例代码：

// 在behavior中定义一个自定义的checkbox样式
let checkboxBehavior = Behavior({
  properties: {
    checked: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    toggle() {
      this.setData({
        checked: !this.data.checked
      })
    }
  }
})

// 在组件中引入checkboxBehavior
Component({
  behaviors: [checkboxBehavior],
  data: {},
  methods: {}
})

这样，在组件中使用`<checkbox>`标签时，就可以继承`checkboxBehavior`中定义的样式和行为。如果想要进一步修改checkbox的样式，可以在组件的`wxss`中进行样式覆盖。比如：

.checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: relative;
}

.checkbox::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #999;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.checkbox.checked::before {
  opacity: 1;
}

这段代码会改变checkbox的样式，使其变成一个圆形的勾选框。如果用户点击了该勾选框，它会变成带有颜色的圆点。

如何让checkbox变圆

可以通过CSS的border-radius属性来实现让checkbox变成圆形。具体实现代码为：

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

其中，width和height控制了checkbox的宽度和高度，border-radius设置为50%即可使checkbox变成圆形，border用于设置边框样式。