css3实现对radio和checkbox的美化

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

tit: 在开发小程序的过程中，无论是横向或者纵向当产生滚动条时，系统默认的滚动条会很粗，效果展示十分难看，我们可以通过设置如下wxss代码实现滚动条的美化。

方法一：

::-webkit-scrollbar {

    display:none;

}

方法二：

::-webkit-scrollbar {

    width: ;

    height: ;

    color: transparent;

}

二，如何改变小程序单选/复选框的样式？

tit: 在开发时，很多情况下我们需要使用单选/复选框，但是我们发现单选复选框的样式并不是我们想要的样式，我们可以通过如下设置实现wxss自定义单选/复选样式的修改。

radio:

/* 未选中的背景样式*/

radio .wx-radio-input {

    width: 40rpx;

    height: 40rpx;

    border-radius: %;

}

/* 选中后的背景样式*/

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: %;

    text-align: center;

    line-height:  40rpx;

    font-size:  30rpx;

    color: #fff;

    background-color: transparent;

    transform: translate(-%,-%) scale();

    -webkit-transform: translate(-%,-%) scale();

}

checkbox:

/* 未选中的背景样式*/

checkbox .wx-checkbox-input {

    width: 40rpx;

    height: 40rpx;

    border-radius: %;

}

/* 选中后的背景样式*/

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: %;

    text-align: center;

    line-height:  40rpx;

    font-size:  30rpx;

    color: #fff;

    background-color: transparent;

    transform: translate(-%,-%) scale();

    -webkit-transform: translate(-%,-%) scale();

}

巴特西

css3实现对radio和checkbox的美化

最新文章

热门文章