微信小程序：修改checkbox/radio样式

清疚 2022-01-11 23:59 474阅读 0赞

# 修改checkbox样式 #

使用mpvue的时候，这里的`checkbox`改成你用在`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);
    }

# 修改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);
    }

[转自][Link 1]

[Link 1]: https://blog.csdn.net/qq_36894527/article/details/83893426