小程序中checkbox的样式是正方形的,设计图上给的是一个圆圈,在查看官方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;}
也可以修改对勾的颜色大小
对勾默认的样式:
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);
修改的样式
.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked::before{ width: 40rpx;/* 选中后对勾大小 */ height: 40rpx;/* 选中后对勾大小 */ font-size:80rpx; /* 对勾大小30rpx */ color:blue; /* 对勾颜色 白色 */}