小程序里改变单选框和多选框的样式

最新推荐文章于 2024-10-16 13:31:03 发布

禅之乐

最新推荐文章于 2024-10-16 13:31:03 发布

阅读量501

点赞数

分类专栏：小程序文章标签： css3

本文链接：https://blog.csdn.net/zhangjie9852/article/details/105748459

版权

小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

/* 多选样式 */

.check-group checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border-color: #03a9f4; background: #03a9f4;}

.check-group checkbox .wx-checkbox-input {height: 36rpx; width: 36rpx; margin-top: -4rpx; border-radius: 50%;border: 2rpx solid #999; background: transparent;}

.check-group checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {border-radius: 50%; width: 36rpx; height: 36rpx; line-height: 36rpx;text-align: center;font-size: 30rpx; color: #fff; background: #48b3f7; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1);}

/* 单选样式 */

.radio-group radio{ margin-right: 40rpx; }

.radio-group radio .wx-radio-input.wx-radio-input-checked{ background-color: #FFF; border: 4rpx solid #48b3f7 !important;}

.radio-group radio .wx-radio-input{height: 28rpx; width: 28rpx; margin-top: -4rpx; border-radius: 50%; border: 4rpx solid #999 !important; background: transparent;}

.radio-group radio .wx-radio-input.wx-radio-input-checked::before {border-radius: 50%; width: 14rpx; height: 14rpx; text-align: center;font-size: 0rpx; color: #fff; background: #48b3f7; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); border: 2px solid #FFF;}