E企盈营销工具技术服务商 热线:4006-838-530

微信小程序checkbox、radio改变默认样式

E企盈直播平台营销卖货系统

在微信小程序中,checkbox、radio的默认样式如下:   但是有时我们需要改变它的样式,如其他颜色、多项选择为圆圈、单项选择为方框等等。例子如下:    实现如下:1. checkbox样式/* 未选中的 背景样式 */checkbox .wx-checkbox-input {  width: 35rpx; /* 背景的宽 */  height: 35rpx; /* 背景的高 */  line-height: 35rpx;  border-radius: 3px;/* 圆角:border-radius: 50%; */}/* 选中后的 背景样式  */checkbox .wx-checkbox-input.wx-checkbox-input-checked {  border: 1rpx solid #04b06d;  background: #04b06d;  width: 35rpx; /* 背景的宽 */  height: 35rpx; /* 背景的高 */  line-height: 35rpx;}/* 选中后的 对勾样式  */checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {  /* border-radius: 50%;圆角 */  width: 35rpx; /* 选中后对勾大小,不要超过背景的尺寸 */  height: 35rpx; /* 选中后对勾大小,不要超过背景的尺寸 */  line-height: 35rpx;  text-align: center;  font-size: 30rpx; /* 对勾大小 30rpx */  color: #fff; /* 对勾颜色 白色 */  background: transparent;  transform: translate(-50%, -50%) scale(1);  -webkit-transform: translate(-50%, -50%) scale(1);}效果如下:如果想要它由方框变成圆形,只需要border-radius: 50%;效果如下:2. radio样式radio .wx-radio-input{  width: 35rpx;  height: 35rpx;  line-height: 35rpx;  border-radius: 3px;/* 圆角:border-radius: 50%; */}radio .wx-radio-input.wx-radio-input-checked {  border: 1rpx solid #4788E5;  background: #4788E5;  width: 35rpx; /* 背景的宽 */  height: 35rpx; /* 背景的高 */  line-height: 35rpx;}radio .wx-radio-input.wx-radio-input-checked::before {  width: 35rpx;  height: 35rpx;  line-height: 35rpx;  text-align: center;  font-size: 30rpx; /* 对勾大小 30rpx */  color: #fff; /* 对勾颜色 白色 */  background: transparent;  transform: translate(-50%, -50%) scale(1);  -webkit-transform: translate(-50%, -50%) scale(1);}效果如下:如果想要它由方框变成圆形,只需要border-radius: 50%;效果如下:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序checkbox、radio改变默认样式
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏