微信小程序—更改默认单,复选框样式

最新推荐文章于 2024-08-02 11:07:26 发布

原创最新推荐文章于 2024-08-02 11:07:26 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在小程序中自定义复选框和单选框的样式，包括未选中和选中状态的背景及对勾样式，适用于希望提升用户体验的开发者。

/*更改复选框的样式 */（小程序默认不让更改）

未选中的背景样式

checkbox .wx-checkbox-input{

    border-radius: 8rpx;

    width: 28rpx;

    height: 28rpx;

    margin: 0 15rpx 4rpx 0;

    border-color: transparent;

    background: transparent;

}

选中后的背景样式

checkbox .wx-checkbox-input.wx-checkbox-input-checked{

    border-color: transparent;

    background: transparent;

}

选中后的对勾样式

checkbox .wx-checkbox-input.wx-checkbox-input-checked:before{
    
    border-radius: 8rpx;

    width: 28rpx;

    height: 28rpx;

    line-height: 28rpx;

    text-align: center;

    font-size: 30rpx;

    color: #1296db;

    background: transparent;

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

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

}

/*更改单选框样式*/

radio .wx-radio-input{

    border-radius: 8rpx;

    width: 28rpx;

    height: 28rpx;

    margin: 0 15rpx 4rpx 0;

}

radio .wx-radio-input.wx-radio-input-checked{

    border-color: #cbe9fc;

    background: #1aad19;

} //这个对单选框选中后背景样式修改无效果，可在页面中radio标签中修改属性color

radio .wx-radio-input.wx-radio-input-checked:before{

    border-radius: 8rpx;    

    width: 28rpx;

    height: 28rpx;

    line-height: 28rpx;

    text-align: center;

    font-size: 28rpx;

    color: #fff;

    background: transparent;
    
    transform: translate(-50%,-50%) scale(1);

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

}

Tip：更改为单、复选框样式时将 checkbox /radio 批量全替换成 radio/ checkbox 即可（单选框样式和以上样式设定可能会有点出入，可根据实际情况进行调整）