⼩程序checkbox和radio样式修改
1、没有修改过的默认（禁⽤）样式：
2、 修改默认样式（⼤⼩颜⾊圆⾓）
/* 修改默认样式 */
checkbox .wx-checkbox-input,radio .wx-radio-input {
border-radius: 50%;
width: 40rpx;
height: 40rpx;
background: #fff;
}
3、修改checked状态时的样式。为什么不直接在这⾥修改背景⾊，因为所有都disabled了，checked的背景⾊只能修改中间的打钩的部分。
/* 修改checked样式 */
radio .wx-radio-input.wx-radio-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
color: #fff;
}
4、修改禁⽤且checked的样式：
/* 修改禁⽤且checked的样式 */
radio .wx-radio-input.wx-radio-input-checked.wx-radio-input-disabled,
checkbox .wx-checkbox-input.wx-checkbox-input-checked.wx-checkbox-input-disabled {
background: #ff6633;
border-color: #ff6633;
color: #fff;
}
完整代码：
/* 修改默认样式 */
checkbox .wx-checkbox-input,radio .wx-radio-input {
border-radius: 50%; /* 圆⾓ */
width: 40rpx; /* 背景的宽 */
height: 40rpx; /* 背景的⾼ */
background: #fff;
}
/* 修改checked样式 */
radio .wx-radio-input.wx-radio-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
color: #fff;
background: #ff6633;
}
/* 修改禁⽤且checked的样式 */
radio .wx-radio-input.wx-radio-input-checked.wx-radio-input-disabled,
checkbox .wx-checkbox-input.wx-checkbox-input-checked.wx-checkbox-input-disabled {  background: #ff6633;
border-color: #ff6633;
color: #fff;
}
–2019.8更新
==============================
2020.7.2更新
/* 修改多选原⽣样式 */
checkbox .wx-checkbox-input.wx-checkbox-input{
width: 14px;
height: 14px;
border-radius: 0;
border: 2px solid #badaff;
float: left;
}
/* 修改单选⾼亮原⽣样式 */
radio .wx-radio-input.wx-radio-input-checked{
background: #fff !important;
border: 2px solid #09bb07 !important;
}
/* 修改单选原⽣样式 */
radio .wx-radio-input.wx-radio-input{
width: 14px;
height: 14px;
border: 2px solid #badaff;
float: left;
}
/* 修改多选⾼亮原⽣样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
background: #fff !important;
border: 2px solid #09bb07 !important;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
content:"";
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWF nZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzl kIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8w Ny8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gP HJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL2 5zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDp DcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFGRkM5OUIzQ0VG NTExRTk4RDBDQUMwRTZEQTVBRkEwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFGRkM5OUI0Q0VGNTExRTk4RDBDQUMwRTZEQTVBRkEwIj4
gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUZGQzk5QjFDRUY1MTFFOThEMENBQzBFNkRBNUFGQTAiIHN0Um VmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUZGQzk5QjJDRUY1MTFFOThEMENBQzBFNkRBNUFGQTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRm OlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5N43WKAAABQUlEQVR42mL4//8/AxWwfNu91iLO3exKyOKUGMgPxIJArHz8w/F/4vvF/gMNf4h sASPYBvIAIxD/P/HxxP+A8/4Mn/58hIk/BmKHby4/7lFiOAPEYD+gwZ/QpUAW2DPh0CcPxLJkGgwC74H4C4rhXHs4NDe8Wn8CavNjMg2+BMQuwGB5DQ8W kMFAaj8XM5f4Gv11DA5CDoyUGAziMCEbDMTi3/5+Ywi5GMRw4N2B/yQafBHZYHCMA5OOBpA+ADIYJYiYuRiQfQBMbv8DL/jjM9gV2WCY4fxAejcQm6Lrg FnAzsTOQKrBYMNBYQ4MFrwWsDCykGww3HBouOO0AAfAazA8QkEAqAiUxVyB+DQ1DEYxnAQLLhFjMIbhRFiAkdxIMhyPBReJdTFGhGIDSJHMRqrBBA1 HsoAVaPAbUktNgAADAPG9RRg0EfoeAAAAAElFTkSuQmCC) no-repeat center center / 100% 100%;
width: 14px;
height: 12px;
}
radio .wx-radio-input.wx-radio-input-disabled,
checkbox .wx-checkbox-input.wx-checkbox-input-disabled{
background: #fff;
border-color: #badaff;
}
/* 选中后的对勾样式（⽩⾊对勾可根据UI需求⾃⼰修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
/* 去除对号 */
content:'';
background: #fff;
vbs小程序代码大全
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #09bb07;
}
单选
多选

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。