⼩程序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;
}