小程序中checkbox的样式是正方形的，设计图上给的是一个圆圈，在查看官方demo的时候发现了怎么修改的
- 首先在微信官方文档上找到复选框的demo
- 然后审查代码找到复选框的样式部分
可以看到选中的复选框的class为wx-checkout-input
选中的样式为wx-checkbox-input-checked
- 这样我们就可以自己修改样式了
先弄成圆圈：
<checkbox class="interestthreecheckbox" value="{{item.id}}"/>
.interestthreecheckbox .wx-checkbox-input {
border-radius: 50%;
width: 35rpx;
height: 35rpx;
}
还可以设置选中的背景颜色
.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked{
background: lightblue;
border: 1px solid lightblue;
}
也可以修改对勾的颜色大小
对勾默认的样式：文章来源：https://www.toymoban.com/news/detail-778990.html
wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {
font: normal normal normal 14px/1 "weui";
content: "\EA08";
font-size: 22px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -48%) scale(0.73);
-webkit-transform: translate(-50%, -48%) scale(0.73);
修改的样式文章来源地址https://www.toymoban.com/news/detail-778990.html
.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked::before{
width: 40rpx;/* 选中后对勾大小 */
height: 40rpx;/* 选中后对勾大小 */
font-size:80rpx; /* 对勾大小30rpx */
color:blue; /* 对勾颜色 白色 */
}到了这里，关于微信小程序查看官方样式及修改checkbox样式为圆圈的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
