写小程序的时候,遇到了这个问题,需要修改微信的默认单选框和复选框,改成适应自己项目的颜色或者形状,那怎么去修改呢,查阅了资料后, 最后修改成功了,代码如下,如有侵权,请及时指出,立即删除
先说checkbox:
* 自定义 checkbox 样式 */
checkbox-group{
width:120rpx;
}
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
border-radius: 50%;
width: 32rpx;
height: 32rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
/* background: #2facff; */
border-color: #409EFF;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
border-radius: 50%;
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
font-size: 28rpx; /* 对勾大小 28rpx */
color: #409EFF; /* 对勾颜色 白色 */
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
再说 radio:
/* wx-radio .wx-radio-input{
width: 32rpx;
height: 32rpx;
border-radius:0;
} */
/* 未选中的 背景样式 */
radio .wx-radio-input{
border-radius: 0;
width: 32rpx;
height: 32rpx;
background: none;
border:2rpx solid #DFDFDD;
}
radio .wx-radio-input.wx-radio-input-checked{
border: 2rpx solid #409EFF;
background: #fff;
}
/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked::before{
border-radius: 0%;
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
font-size:28rpx;
color:#409EFF; /* 对勾颜色 白色 */
background: #fff;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}