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

性野喜悲

于 2024-05-22 11:49:18 发布

阅读量443

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/leng0920/article/details/139116161

版权

修改前

修改后

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;
   }
}