微信小程序修改checkbox组件默认样式
关于
- UI设计的多选框的样式十分好看，微信自带的样式丑到爆，这时候就需要我们自定义
checkbox的默认样式了。
正文
checkbox组件，默认的组件样式很丑，有的时候需要根据业务UI实现自己的checkbox。先给<checkbox class="checkbox"/>一个.checkbox类名
.checkbox .wx-checkbox-input {
border-radius: 32rpx; /* 圆角 */
width: 32rpx; /* 背景的宽 */
height: 32rpx; /* 背景的高 */
border: 2px solid rgba(255, 129, 92, 1);
}
.checkbox .wx-checkbox-input-disabled {
border-radius: 32rpx; /* 圆角 */
width: 32rpx; /* 背景的宽 */
height: 32rpx; /* 背景的高 */
background: #f3f3f3;
border: 1px solid rgba(201, 201, 201, 1);
}
.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: rgba(255, 129, 92, 1);
}
.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
font-size: 24rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
.checkbox .wx-checkbox-input {
border-radius: 32rpx; /* 圆角 */
width: 32rpx; /* 背景的宽 */
height: 32rpx; /* 背景的高 */
border: 1px solid rgba(255, 129, 92, 1);
}
.checkbox .wx-checkbox-input-disabled {
border-radius: 32rpx; /* 圆角 */
width: 32rpx; /* 背景的宽 */
height: 32rpx; /* 背景的高 */
background: #f3f3f3;
border: 1px solid rgba(201, 201, 201, 1);
}
.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: rgba(255, 129, 92, 1);
}
.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
font-size: 24rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019年4月26日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
