小程序css改变checkbox默认样式

最新推荐文章于 2025-03-04 12:41:16 发布

原创最新推荐文章于 2025-03-04 12:41:16 发布 · 792 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一个使用WXML和WXSS实现的免责声明勾选功能，展示了如何在微信小程序中创建一个勾选框并绑定事件，同时设置文字链接跳转到免责声明页面，以及如何自定义勾选框的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml:

<view class='flex-end treaty-text'>

<checkbox-group bindchange="selectedTreaty">

<view class='check-box'>

<checkbox value="1" checked='checked'/>

</view>

</checkbox-group>

<view>我已阅读和同意</view>

<navigator hover-class='none' url='/guofeng/exemptionTreaty/exemptionTreaty' class='treaty-skip'>《2019国风大赛服务免责声明》</navigator> <view>并报名参赛</view></view>

wxss:

.flex-end{

display: flex;

align-items: center;

justify-content: flex-end;

}

.treaty-text{

padding-top: 28rpx;

text-align: center;

font-size: 22rpx;

color: rgba(119,119,119,1);

}

.treaty-skip{

color: rgba(119,156,217,1);

}

checkbox .wx-checkbox-input{

width: 24rpx;

height: 24rpx;

}

//改变选中√颜色

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

color:rgba(150,13,7,1);

}