黄良钵博客

程序开发 微信小程序 自定义单选(radio)、复选按钮样式(checkbox)样式

radio /*  重写 radio 样式  */ /* 未选中的 背景样式 */ radio .wx-radio-input{    border-radius: 50%;/* 圆角 */    width: 40rpx;    height: 40rpx; } /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */ radio .wx-radio-input.wx-radio-input-checked{    border: none;    background: red; } /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */ radio .wx-radio-input.wx-radio-input-checked::before{    border-radius: 50%;/* 圆角 */    width: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */    height: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */    line-height: 40rpx;    text-align: center;    font-size:30rpx; /* 对勾大小 30rpx */    color:#fff; /* 对勾颜色 白色 */    background: transparent;    transform:translate(-50%, -50%) scale(1);    -webkit-transform:translate(-50%, -50%) scale(1); } checkbox /*  重写 checkbox 样式  */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{    border-radius: 50%;/* 圆角 */    width: 40rpx; /* 背景的宽 */    height: 40rpx; /* 背景的高 */ } /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */ checkbox .wx-checkbox-input.wx-checkbox-input-checked{    border: none;    background: red; } /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{    border-radius: 50%;/* 圆角 */    width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */    height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */    line-height: 40rpx;    text-align: center;    font-size:30rpx; /* 对勾大小 30rpx */    color:#fff; /* 对勾颜色 白色 */    background: transparent;    transform:translate(-50%, -50%) scale(1);    -webkit-transform:translate(-50%, -50%) scale(1); }