微信小程序完美修改checkbox/radio样式-小程序怎么美化-小程序优化排名-即速应用

微信小程序完美修改checkbox/radio样式-小程序怎么美化-小程序优化排名

浏览量：4315 时间：2020-04-06 来源：欧巴酱

1.
1.修改checkbox样式
/*重写checkbox样式*//*未选中的背景样式*/checkbox.wx-checkbox-input{border-radius:50%;/*圆角*/width:40rpx;/*背景的宽*/height:40rpx;/*背景的高*/}/*选中后的背景样式（红色背景无边框可根据UI需求自己修改）*/checkbox.wx-checkbox-input.wx-checkbox-input-checked{border:none;background:red;}/*选中后的对勾样式（白色对勾可根据UI需求自己修改）*/checkbox.wx-checkbox-input.wx-checkbox-input-checked::before{border-radius:50%;/*圆角*/width:40rpx;/*选中后对勾大小，不要超过背景的尺寸*/height:40rpx;/*选中后对勾大小，不要超过背景的尺寸*/line-height:40rpx;text-align:center;font-size:30rpx;/*对勾大小30rpx*/color:#fff;/*对勾颜色白色*/background:transparent;transform:translate(-50%,-50%)scale(1);-webkit-transform:translate(-50%,-50%)scale(1);}2.
2.修改radio样式
/*重写radio样式*//*未选中的背景样式*/radio.wx-radio-input{border-radius:50%;/*圆角*/width:40rpx;height:40rpx;}/*选中后的背景样式（红色背景无边框可根据UI需求自己修改）*/radio.wx-radio-input.wx-radio-input-checked{border:none;background:red;}/*选中后的对勾样式（白色对勾可根据UI需求自己修改）*/radio.wx-radio-input.wx-radio-input-checked::before{border-radius:50%;/*圆角*/width:40rpx;/*选中后对勾大小，不要超过背景的尺寸*/height:40rpx;/*选中后对勾大小，不要超过背景的尺寸*/line-height:40rpx;text-align:center;font-size:30rpx;/*对勾大小30rpx*/color:#fff;/*对勾颜色白色*/background:transparent;transform:translate(-50%,-50%)scale(1);-webkit-transform:translate(-50%,-50%)scale(1);}3.
使用方法：直接粘贴到相应wxss页面也可放到全局Css页