一，如何隐藏小程序中的很粗的滚动条，实现页面的美化？
 
tit: 在开发小程序的过程中，无论是横向或者纵向当产生滚动条时，系统默认的滚动条会很粗，效果展示十分难看，我们可以通过设置如下wxss代码实现滚动条的美化。
 
方法一：
::-webkit-scrollbar {
    display:none;
}
 
方法二：
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

 

二，如何改变小程序单选/复选框的样式？
 
tit:  在开发时，很多情况下我们需要使用单选/复选框，但是我们发现单选复选框的样式并不是我们想要的样式，我们可以通过如下设置实现wxss自定义单选/复选样式的修改。
 
radio:
/* 未选中的背景样式*/
radio .wx-radio-input {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
}
/* 选中后的背景样式*/
radio .wx-radio-input.wx-radio-input-checked {
    background-color: #16cc80;
}
radio .wx-radio-input.wx-radio-input-checked::before {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    text-align: center;
    line-height:  40rpx;
    font-size:  30rpx;
    color: #fff;
    background-color: transparent;
    transform: translate(-50%,-50%) scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
}

checkbox:

/* 未选中的背景样式*/
checkbox .wx-checkbox-input {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
}
/* 选中后的背景样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background-color: #16cc80;
}
/*选中状态对勾的样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    text-align: center;
    line-height:  40rpx;
    font-size:  30rpx;
    color: #fff;
    background-color: transparent;
    transform: translate(-50%,-50%) scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
}

 

版权声明：本文为bgwhite原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/bgwhite/p/9265800.html