今日更新:小程序知识
自定义单选框radio和复选框checkbox
1.单选框
radio .wx-radio-input {
/* 自定义样式.... */
height: 24rpx;
width: 24rpx;
margin-top: -4rpx;
border-radius: 50%;
border: 2rpx solid #999;
background: transparent;
}
radio .wx-radio-input.wx-radio-input-checked::before {
border-radius: 50%; /* 圆角 */
width: 28rpx; /* 选中对勾后,对勾背景的大小,不要超过背景的尺寸 */
height: 28rpx; /* 选中对勾后,对勾背景的大小,不要超过背景的尺寸 */
line-height: 28rpx;
text-align: center;
font-size: 30rpx; /* 对勾大小 30rpx */
color: #fff; /* 对勾颜色 白色 */
background: #0076fe;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
2.复选框
checkbox .wx-checkbox-input {
/* 自定义样式.... */
height: 40rpx;
width: 40rpx;
border-radius: 50%; //可以不设置圆角
border: 2rpx solid #6cbe72;
background: transparent;
margin-bottom: 10rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
border-radius: 50%; /* 圆角 */ //可以不设置圆角
width: 40rpx; /* 选中对勾后,对勾背景的大小,不要超过背景的尺寸 */
height: 40rpx; /* 选中对勾后,对勾背景的大小,不要超过背景的尺寸 */
line-height: 40rpx;
text-align: center;
font-size: 30rpx; /* 对勾大小 30rpx */
color: #fff; /* 对勾颜色 白色 */
background: #6cbe72;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
可以根据自己项目要求来设置大小和颜色~~