微信小程序checkbox和radio重置样式

原创

我的代码呢 2022-10-28 04:25:24 博主文章分类：小程序 ©著作权

文章标签 其它 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者我的代码呢的原创作品，请联系作者获取转载授权，否则将追究法律责任

checkbox

/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
   border: 1px solid #58B6BF;
   width: 40rpx;
   height: 40rpx;
}
/* 选中后的 背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: 1px solid #58B6BF;
   
}
/* 选中后的 对勾样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border: 1px solid #58B6BF;
   width: 40rpx;
   height: 40rpx;
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx;
   color:#58B6BF;
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}

radio

/* 未选中的 背景样式 */
radio .wx-radio-input{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
}
/* 选中后的 背景样式  */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background: #4EAC6D;
}
/* 选中后的 对勾样式 */
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;
   color:#fff;
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}