css3实现对radio和checkbox的美化

一，如何隐藏小程序中的很粗的滚动条，实现页面的美化？

 

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);
}