微信小程序重写checkbox的样式,将方块变成圆形 css

微信小程序重写checkbox的样式,将方块变成圆形 css_第1张图片在这里插入图片描述

/* 重写 checkbox 样式 */
 /* 未选中的 背景样式 */
 checkbox .wx-checkbox-input{
     border-radius: 50%;/* 圆角 */
     width: 46rpx; /* 背景的宽 */
     height: 46rpx; /* 背景的高 */
 }
 /* 选中后的 背景样式*/
 checkbox .wx-checkbox-input.wx-checkbox-input-checked{
     border: 1rpx solid #f3333e;
     background: #f3333e;
 }
 /* 选中后的 对勾样式 
 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: transparent;
     transform:translate(-50%, -50%) scale(1);
     -webkit-transform:translate(-50%, -50%) scale(1);
 }

你可能感兴趣的:(笔记,css3,checkbox,小程序,html,css)