小程序checkbox改成圆形与radio样式保持一致

修改前

修改后

html:

复制代码
  <view class="agreement">

    <checkbox value="{{ isAgreed }}" bind:tap="toggleCheckbox" />

    <text>我同意室外智能健身房 <text class="link" bind:tap="showUserProtocol">用户协议</text> 和 <text class="link" bind:tap="showPrivateProtocol">隐私协议</text> </text>

  </view>

css:

复制代码
.agreement{
  checkbox .wx-checkbox-input {
    width: 40rpx; /* 设置宽高相等,可以确保是圆形 */
    height: 40rpx;
    border-radius: 50%; /* 圆形的关键属性 */
  }
 checkbox .wx-checkbox-input.wx-checkbox-input-checked {
     color:#fff;
     background: #16B871;
     border-color:#16B871;
   }
}
相关推荐
江华森6 分钟前
《云原生从0到1:4台华为云ECS搭建Kubernetes 1.28集群实录(上)——环境与踩坑全记录》
前端·后端
codeY10 分钟前
Vite 前端发布后「点击菜单没反应」?旧版本资源 404 的完整排查与修复实录
前端·前端工程化
90后的晨仔28 分钟前
uni-app Vue3 状态管理 Pinia 完全指南:从概念到实战的深度解析
前端
mqiqe28 分钟前
AgentScope Java 2.0 集成 Chat Completions Web:一行依赖让你的 Agent 变身 OpenAI 兼容服务
java·开发语言·前端
程序员小八77729 分钟前
后端开发初学TypeScript
前端·javascript·typescript
90后的晨仔31 分钟前
Puppeteer 与 Playwright 深度实战指南:从零到精通,全面提升开发效率
前端
sunphp开发者39 分钟前
阿里云CDN加速配置问题
前端·阿里云·云计算
小小数媒成员1 小时前
存储器层级结构
java·服务器·前端
单线程121382 小时前
从案例分析 Vue3 Tokenizer 源码
前端·javascript·vue.js
明月_清风2 小时前
🖥️ Electron 三进程 Host 实战:从架构设计到生产落地的完整指南
前端·electron·客户端