• 微信小程序查看官方样式及修改checkbox样式为圆圈


    小程序中checkbox的样式是正方形的,设计图上给的是一个圆圈,在查看官方demo的时候发现了怎么修改的

    1. 首先在微信官方文档上找到复选框的demo
    1. 然后审查代码找到复选框的样式部分

    可以看到选中的复选框的class为wx-checkout-input

    选中的样式为wx-checkbox-input-checked

    1. 这样我们就可以自己修改样式了

    先弄成圆圈:

    	<checkbox class="interestthreecheckbox" value="{{item.id}}"/>
    
    1. .interestthreecheckbox .wx-checkbox-input {
    2. border-radius: 50%;
    3. width: 35rpx;
    4. height: 35rpx;
    5. }

    还可以设置选中的背景颜色

    1. .interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked{
    2. background: lightblue;
    3. border: 1px solid lightblue;
    4. }

    也可以修改对勾的颜色大小

    对勾默认的样式:

    1. wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {
    2. font: normal normal normal 14px/1 "weui";
    3. content: "\EA08";
    4. font-size: 22px;
    5. position: absolute;
    6. top: 50%;
    7. left: 50%;
    8. transform: translate(-50%, -48%) scale(0.73);
    9. -webkit-transform: translate(-50%, -48%) scale(0.73);

    修改的样式

    1. .interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked::before{
    2. width: 40rpx;/* 选中后对勾大小 */
    3. height: 40rpx;/* 选中后对勾大小 */
    4. font-size:80rpx; /* 对勾大小30rpx */
    5. color:blue; /* 对勾颜色 白色 */
    6. }
  • 相关阅读:
    [附源码]java毕业设计基于学生信息管理系统
    python logging
    EndNote技巧 | Bibliography的Templates修改
    计算机毕业设计node+vue基于微信小程序的乐团团购系统的设计与实现
    Paxos算法
    【算法】二分相关题目
    【LeetCode】Day129-组合总和 II
    ubuntu18.04安装pyaudio
    Spring面试题
    101道算法javaScript描述【一】
  • 原文地址:https://blog.csdn.net/u012767761/article/details/133792995