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

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);
}

根据设计图自选样式!

发布了102 篇原创文章 · 获赞 26 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/xuelian3015/article/details/95389507