小程序
小游戏
企业微信
微信支付
扫描小程序码分享
自定义组件使用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;
}
你想怎么修改?
我想改成下面的样式,都是单选框,这个我想写在组件里面