小程序
小游戏
企业微信
微信支付
扫描小程序码分享
自定义组件使用radio 和checkbox如何修改样式？因为checkbox有多个样式，不能用统一修改
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
微信小程序有提供了CSS属性
1、未选中的背景样式：wx-checkbox-input 2、选中后的背景样式 ： wx-checkbox-input.wx-checkbox-input-checked 3、选中后的勾子的样式：wx-checkbox-input.wx-checkbox-input-checked::before /* 未选中的背景样式 */ checkbox .wx-checkbox-input{ width: 40rpx; height: 40rpx; border-radius: 50%; } /* 选中后的背景样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border: none; background: #37C674; } /* 选中后的勾子样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{ width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; text-align: center; font-size:32rpx; color:#FFF; background: transparent; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); }
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
.checkbox .wx-checkbox-input.wx-checkbox-input-disabled {
border: none;
background: #f3b19a;
}
你想怎么修改？
我想改成下面的样式，都是单选框，这个我想写在组件里面
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
微信小程序有提供了CSS属性
1、未选中的背景样式：wx-checkbox-input 2、选中后的背景样式 ： wx-checkbox-input.wx-checkbox-input-checked 3、选中后的勾子的样式：wx-checkbox-input.wx-checkbox-input-checked::before /* 未选中的背景样式 */ checkbox .wx-checkbox-input{ width: 40rpx; height: 40rpx; border-radius: 50%; } /* 选中后的背景样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border: none; background: #37C674; } /* 选中后的勾子样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{ width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; text-align: center; font-size:32rpx; color:#FFF; background: transparent; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); }.checkbox .wx-checkbox-input.wx-checkbox-input-disabled {border: none;background: #f3b19a;}你想怎么修改？
我想改成下面的样式，都是单选框，这个我想写在组件里面