小程序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;
   }
}
相关推荐
一枚前端小能手1 分钟前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
草莓熊Lotso2 分钟前
《C++ Web 自动化测试实战:常用函数全解析与场景化应用指南》
前端·c++·python·dubbo
Tech_Lin11 分钟前
JavaScript Date时间对象的常用操作方法总结
前端·javascript
温宇飞12 分钟前
JavaScript 异常处理
前端
小岛前端16 分钟前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
用户15105810474318 分钟前
带leading和trailing的防抖和节流
前端
IT小哥哥呀21 分钟前
论文见解:REACT:在语言模型中协同推理和行动
前端·人工智能·react.js·语言模型
一枚前端小能手23 分钟前
🚫 请求取消还在用flag?AbortController让你的异步操作更优雅
前端·javascript
code_YuJun26 分钟前
前端脚手架开发流程
前端
golang学习记29 分钟前
从0死磕全栈之使用 VS Code 调试 Next.js 应用完整指南
前端