小程序问题之修改微信小程序默认checkbox框的样式，改为圈圈式

淩亂°似流年 2021-09-19 08:18 339阅读 0赞

# 现有的样式 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]  
index.wxml  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]  
index.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]  
index.wxss  
![在这里插入图片描述][20190509111035629.png]

# 通过css修改 #

/* 重写 checkbox 样式 */
    /* 未选中的 背景样式 */
    checkbox .wx-checkbox-input{ 
      border-radius: 50%;/* 圆角 */
      width: 46rpx; /* 背景的宽 */
      height: 46rpx; /* 背景的高 */
    }
    /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
    checkbox .wx-checkbox-input.wx-checkbox-input-checked{ 
      border: 1rpx solid #FF783B;
      background: #FF783B;
    }
    /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
    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);
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 3]

# 注：css代码是网上找的，为了方便以后其他项目用，记录了下来。 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/0fbc21edc3c74f85b8448616564f920b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/43322a12cedc40dd8e87884a886b1f8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]: /images/20210804/e26b49afaab74d8cb8528e9c14c8eb41.png
[20190509111035629.png]: /images/20210804/b019b4ae17f84db6b8a5c44f78c29d84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 3]: /images/20210804/416cf8c269c043b28bc55e6d1c55b40d.png