微信小程序组件样式修改

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

注意：如果组件放在自定义组件里，可能需要设置
options: {
styleIsolation: ‘shared’,
},

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