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); }
原创声明,本文系作者授权云+社区发表,未经许可,不得转载。
如有侵权,请联系 yunjia_community@tencent.com 删除。
我来说两句