微信小程序查看官方样式及修改checkbox样式为圆圈

最新推荐文章于 2025-06-24 10:01:54 发布

原创最新推荐文章于 2025-06-24 10:01:54 发布 · 3.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在微信小程序中自定义Checkbox样式，包括圆形显示、选中背景颜色设置及对勾颜色大小调整等。

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

小程序中checkbox的样式是正方形的，设计图上给的是一个圆圈，在查看官方demo的时候发现了怎么修改的

首先在微信官方文档上找到复选框的demo

然后审查代码找到复选框的样式部分

可以看到选中的复选框的class为wx-checkout-input

选中的样式为wx-checkbox-input-checked

这样我们就可以自己修改样式了

先弄成圆圈：

	<checkbox class="interestthreecheckbox" value="{{item.id}}"/>

.interestthreecheckbox .wx-checkbox-input {
  border-radius: 50%;
  width: 35rpx;
  height: 35rpx;
}

还可以设置选中的背景颜色

.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked{
  background: lightblue;
  border: 1px solid lightblue;
}

也可以修改对勾的颜色大小

对勾默认的样式：

wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {
    font: normal normal normal 14px/1 "weui";
    content: "\EA08";
    font-size: 22px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.73);
    -webkit-transform: translate(-50%, -48%) scale(0.73);

修改的样式

.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  width: 40rpx;/* 选中后对勾大小 */
  height: 40rpx;/* 选中后对勾大小 */
  font-size:80rpx; /* 对勾大小30rpx */
  color:blue; /* 对勾颜色 白色 */
}