微信小程序

图片顶到最上面

当前页面的json中配置:
json "navigationStyle":"custom"

checkbox样式修改

 checkbox {
        /* 未选中时--样式更改 */
        .wx-checkbox-input {
          border-radius: 50%;
          width: 30rpx;
          height: 30rpx;
          background: #6c6d72;
          border: 1rpx solid #6c6d72;

          /* 选中后的--样式更改 */
          &.wx-checkbox-input-checked {
            background: #009212;
            /* 选中后的--对勾的样式更改 (可根据自己需求修改) */
            &::before {
              border-radius: 50%;
              width: 30rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
              height: 30rpx;
              line-height: 30rpx;
              text-align: center;
              font-size: 24rpx;
              color: #26282F;
              background: transparent;
              transform: translate(-50%, -50%) scale(1);
              -webkit-transform: translate(-50%, -50%) scale(1);
            }
          }
        }
      }

image
image

或者用背景图片

 checkbox {
      /* 未选中时--样式更改 */
      .wx-checkbox-input {
        border-radius: 50%;
        width: 30rpx;
        height: 30rpx;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAAGXcA1uAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAEE0lEQVRIDY2VTWhUVxTH57150zESMTFCxBgTJdKFWrprvgk4LtqFhOgIIlJBBQMK1lVW7bZdtCWtVgtx4cdCHM2m1IUo5DvuIiiotGrETqN0ggSTOJmZzPT3v777mMTEeOFy7znnf/73nHPPfc8JMZqbm0/ncrleVxvHcX4Mh8MZN5/P38D41HXdpFCCzWl1WlpaCmbjOCHX3+QKhULIkWCt2tshZvlOzc/Pt2cymbXs8zIaj9bWVrwNpXQhTj5uDG1tbR6BPcX4YHh4+CsZnYaGhrjnedck2DE4OBgOwvKVWWh2EvwjEyIIMnNC0H0hpUCBB/yfY7wnJfs5lwKUGISv1H5oaGiViUoCSe6DJsEZEhcMmCaz2Wz16OjoW0cpAMoW57cAHQrlkN8wy8FdcAnwiQ+W4RanGDysc+l0ejOCZqmU2I64GB5IYHjMbf39/Q7xr4GovqSk5Bm6f5kRphn2klJIFb4uBIkyt2Kwcl91QdLxeDw8MTFxDvCxAMFGJSP27SMjI0+kDxwk1NfX1xLOWZxiiK+Y3Vxfd19fn/IzwzhQqVWwvIBtvTXYVUXAFucWr0unkrjE9nYpsACAtSTULNo4TU1NPSqXhGXGOPoawnTARZhLg7GrWglC2YJDUlUjkpPvbukd9UMWldeUFeOVgYGB/bTMr6g2SY/TqcAB4SxsG1gfEfcFOv0Q7+Ump5wQ2B8bAgcMZwAcjMVi2+nKozD/SbhfKhQ7wNx2AKXZRK0S9k6An6HrLAbLPj09XesR6w4u5y/rwMWdE3AxGHtqbGzsuUuP/w3rceuwBNAUAaJqYUwOJPg7J9UBNh8U66wVsp7KykqP9khLXtBLUqgJk8lkLTl0MQ8V5yf74qFDmJeZ31dVVY0nEon5YkxwgPqPZ/s1oZ4HXIz56D3BqBk6yeKinr8czQH0YR2FvYscvLmPZhXJ++9zUg9c9XcaGxtruNbHK5Vi8YEiZegZ/kHG3cwGeLpY9YE273pmZuZTdK4efdBHMsoZvVklFw+fOEMZrpJ1Le3fQVkfg9mK7hOLFWdpaelv6opdVumvKdJrT6VSa3DQRf9XdFiBGl+cnZ3dRvcf4M7yvO5fwI2DOQbWfLstH9nEdMBLq/DXCiL6uby8vAOSH3DcCOkewN9CUEOLHo5Go+v8d/gC7ElsUeYiGiO+1K/kG7Y/LWVF9wzH7zjosux02nqyu8ShuxG9ZUgFteO0+ZGQ6nkiOfIBh0k8XmPfSBarrfdyKxi1a08kEum078ClVfdyaQv+r8sRrKSHPM5foRdc3n6+8vRsgix0SfuIIEUZVuIJ7MLioyzj4oBcPwTzsbcZBGC7od7e1NRUFa3WQZfEINiJrdK3v6Jc99Hd4RPYW1ZW9k/xr8lyaP0fsmX9YeQUfzcAAAAASUVORK5CYII=") no-repeat center/100%;
        border: 0 none;

        /* 选中后的--样式更改 */
        &.wx-checkbox-input-checked {
          background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAAGXcA1uAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAE0klEQVRIDZVWS2wbRRieHe+uH7v22t51HZp3E9qCWkAKQhUXHkklJKoKkFDhhBCXSqUNhLSKSiWQqlKJpCFNKxWBeIlDAHEAJRxQQVRwgQvPA2raOnZxXDtZx17H6/Xa+2D+dTdxA+5jDvvP/I9v/vnn//9ZDyJDOtI76x8ILWGYyB3KHpPFJrar5hRX8FeLXaUfQAtRU6LlUDQdtR0O+WCY0HWPw6AcbpMU1tjACIMto9NWJMO/FyiyD4GFRVvIscCTkrNwrMlHSoU+b0CNxjkmZhe9Gl0ov7EYRxRlU+Kr3Wfyvasvu9oODYb8uJnpqWM7vMi/gFZLmuMi2nkfQ+sedNcl6dlie/kTsGoI/vqzHpa5/el7l750mAa2MZcV2mAht5feBQrDGpFxwyvbpmKvbZle7lFudKKhh1iNNhk50KGOJ7MUIkdAXfXyddl/CAQanK37DCxkuXkM5wUtbGE7kuOvuRYQMeEyPyRmgo9YHsvxRGlTt9IQnLrfiFnYompeMwInDc+l2nnNO5Dty59XGLPh9nUkChH/2bfj9Zrf8LjoraiUCO9Zt57s8Asy/k1pK29rNiA3bEfTob3yZGIO+OsGZCdxuPtxPWrMqGFdIhdgCnnuW9mq7EMTOdUFcQz40b5NtdhqppVbsaRwdvlU4pCTBOijHh8ulDXIoZsNcSF4Nv9O6iAlHO28COFqpexT2Xo1UKOJ8xS6yvD4ZsqRbDBZHdvv82qMCYASDnzWSCay4Aq+ildtCEAYzfKXCide7Isc+/APPVCngaeI6hNrBrzi/1qn0WavyurRTPDvlROpbeLYxwuFeHkHKMMwvKbHsYTFUlfx+bYr4Xx2x0pcH7tWEsd6k/n2UhfI3MEVvTJFCssiEXLCSxESS4Y+1TnzQSVevsdVdKlIcouShrfskfuKsy6zFYUUrx3JMVg+nZiDcm2lCHxoAIzCtcPFOYeWTyWfg8TyGI220Wws5PiLFvIF1LcWcsBfzyVXiyShlGYHScpPrIqVre75XPFGCskZzAfmGY0elTtq36ORtNass7YBd7Q37tft0yvt5X23SqtmgOY5HDWa4b/QKDQM5Q8yp96kV/qeLG0uf9UquZtBbmcOFxDK8E/JU1e+ocRDXYOFnsr5W4Xi/4DhDoIrvjRTZc5ZlPVoKV4ZqrPkGGRA6CLJwG6sR82ZOwWnCXA4wyfCS6Gh4vGXeiiG+tFgrG6TtCnXEcCE3oDVcFVymUDZKm1KCWHCm/Ztjy0Is6Q6DVcOjTCc4ea5pH938WSqH3ssI3zsg99XYqWfoDNtdBQaD4bO4wIArftMrIm1g5GK/8Dy3u5nqh6zU8yEpqV/hO/Ci4HB4smr24NGQIDSKkTLF4pxdadB39hIXTzAptyn02W6FMouoPiqwbzv/ezTnSPosQtG9M3uhymNmlE2qZ3Ghu7s2jVTKS3MOQ+JwLK/tupLsBFDPCEPilH3GqzJrMe5GWzjHApO0fUBDA1ZudtzP7RMyOONw8Y2gvSt8uSVuQ1wwIilhDNKP34AsNduHd4f/nB/zI+s15WYeuBOawJyX8hx5zSMj5fHLy9DXwFn1zdodp1shg63BcSadxfl9QxXOX2X7jci0FBBDS4PXlDSs3+BP548q/+MxrMVF7QZ6l8EDCIEhnMzTQAAAABJRU5ErkJggg==") no-repeat center/100%;
          /* 选中后的--对勾的样式更改 (可根据自己需求修改) */
          &::before {
            display: none;
          }
        }
      }
    }

image
image

posted @ 2022-06-23 11:18  shine_lovely  阅读(16)  评论(0编辑  收藏  举报