当前位置：首页 > news >正文

微信小程序修改默认单选，多选按钮样式

news 2025/7/19 3:39:17

微信小程序修改默认单选，多选按钮样式

1.在微信开发者文档中复制一份单选或者多选的代码

<!--pages/index3/index.wxml-->
<radio-group bindchange="radioChange"><label class="weui-cell weui-check__label" style="display: flex;"><radio value="1" checked="true"/><view class="weui-cell__bd">按钮1</view></label><label class="weui-cell weui-check__label" style="display: flex;"><radio value="1" checked="true"/><view class="weui-cell__bd">按钮1</view></label><label class="weui-cell weui-check__label" style="display: flex;"><radio value="1" checked="true"/><view class="weui-cell__bd">按钮1</view></label></radio-group>

2. 根据情况复制单选或者多选代码即可

index.wxss

/* pages/index3/index.wxss */
/* 单选按钮样式 */
.wx-radio-input {width: 32rpx !important;height: 32rpx !important;border-radius: 100%;background-color: #fff !important;}/*勾选样式 */.wx-radio-input.wx-radio-input-checked {border: none !important;background-color: #6784f5 !important;}/* 多选框样式 *//* 未勾选样式 */
.wx-checkbox-input {width: 33rpx !important;height: 33rpx !important;
}
/* 勾选样式 */
.wx-checkbox-input.wx-checkbox-input-checked{border-color:#6784f5 !important;background:#6784f5 !important;
}