本文介绍了如何自定义微信小程序中的单选框（radio）和复选框（checkbox）的未选中及选中状态的样式。包括设置border-radius、尺寸、边框宽度和颜色，以及选中时的背景颜色等。
/* radio未选中时样式 */
radio .wx-radio-input{
border-radius: 3rpx;
height: 26rpx;
width: 26rpx;
margin-top: -4rpx;
/* 自定义样式.... */
}
/* radio未选中时样式 */
radio .wx-radio-input{
width:30rpx;
height:30rpx;
border:2rpx solid rgba(153,153,153,1);
border-radius:50%；
}
/* radio选中时样式 */
radio .wx-radio-input.wx-radio-input-checked{
background-color: #e02e24;
border: 1rpx solid #e02e24;
/* 自定义样式.... */
}
/* radio选中时样式 */
radio .wx-radio-input.wx-radio-input-checked::before{
width:30rpx;
height:30rpx;
padding: 10rpx;
background:rgba(255,156,0,1);
border-radius:50%;
}
/* checkbox未选中时样式 */
checkbox .wx-checkbox-input{
border-radius: 3rpx;
height: 26rpx;
width: 26rpx;
margin-top: -4rpx;
/* 自定义样式.... */
}
/* checkbox选中时样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
background-color: #e02e24;
border: 1rpx solid #e02e24;
/* 自定义样式.... */
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
