微信小程序组件样式修改

微信小程序checkbox、radio、button、switch、swiper组件样式（CSS）修改

1.checkbox样式修改

/*checkbox整体大小*/checkbox {width: 240rpx;height: 90rpx;}/*checkbox选项框大小*/checkbox . wx-checkbox-input {width: 50rpx;height: 50rpx;border-radius: 50%;//选项框变成O}/*checkbox选中后样式*/checkbox . wx-checkbox-input. wx-checkbox-input-checked {background: #00C250; //选中后的背景颜色}/*checkbox选中后图标样式*/checkbox . wx-checkbox-input. wx-checkbox-input-checked::before {width: 28rpx; //里面选中icon的宽height: 28rpx;//里面选中icon的高line-height: 28rpx;text-align: center;font-size: 22rpx;color: #fff; //icon的颜色background: transparent ;transform: translate(-50%, -50%) scale(1);}

2、修改默认的radio样式

/*默认背景样式*/radio .wx-radio-input {width: 40rpx;height: 40rpx;}/*选中后的背景样式(红色背景无边框可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked {width: 40rpx; /*选中后对勾大小，不要超过背景的尺寸*/height: 40rpx; /*选中后对勾大小，不要超过背景的尺寸*/border: none;background: #f00;}/*选中后的对勾样式(白色对勾 可根据[UI需求自己修改) */radio .wx-radio-input.wx-radio-input-checked: :before {border-radius: 50%;/*圆角*/width: 40rpx; /*选中后对勾大小，不要超过背景的尺寸*/height:. 40rpx; /* 选中后对勾大小，不要超过背景的尺寸*/1ine-height: 40rpx;text-align: center;font-size:30rpx; /*对勾大小30rpx */co1or:#fff;/*对勾颜色白色*/border: 1rpx solid #f00;background: #f00; transform: translate(-50%，-50%) scale(1);}

3、修改微信小程序button组件样式

//修改禁用的时候样式button[disabled]:not([type]){color: #fff;background-color: #fff;opacity: 0.3;}//去掉边框button::after {border: none;}//按钮的样式类型样式修改button[type='primary']{background-coLor: #FFCCOO;color: #FFF;}//点击按钮的样式类型样式修改<button class="btn" hover-class="btn_hover">确定</button>. btn_hover{background-color: pink;}

4、修改switch开关样式

/*switch整体大小及背景色*/. wx-switch-input {width:82rpx !important;height :36rpx !important;background:#50D2C2 !important;border: #50d2c2 !important;/*重置开关边框颜色*/}/*白色样式(false的样式) */. wx-switch-input::before {width:80rpx !important;height: 36rpx !important;}/*绿色样式(true的样式) */. wx-switch-input::after {width: 40rpx !important;height: 36rpx !important;}

.wx-switch-input::before {background:#d9d9d9 !important;}

5、修改swiper轮播组件样式

<swiper class="swiper-box" indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}" wx:key='{{index}}'><swiper-item><image src="{{item}}" class="slide-image" /></swiper-item></block></swiper> .swiper-box{height: 456rpx;}.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: 2rpx; }圆点的样式.swiper-box .wx-swiper-dot{width:40rpx;display: inline-flex;height: 20rpx;margin-left: 6rpx;justify-content:space-between;}.swiper-box .wx-swiper-dot::before{content: '';flex-grow: 1;background: rgba(255,255,255,0.8);border-radius: 10rpx;}.swiper-box .wx-swiper-dot-active::before{background:red; }

如果觉得《微信小程序组件样式修改》对你有帮助，请点赞、收藏，并留下你的观点哦！