UniApp 小程序下 爆改 checkbox 样式

具体就不写代码解释了

checkbox组件

  <view class="login-agreement">
    <view>
      <checkbox-group>
        <checkbox class="login-agreement-checkbox" :checked="isChecked" @click="handleCheckboxChange">
        </checkbox>
        <view @click="handleCheckboxChange">我已仔细阅读并同意
          <text @click=">{{agreementsTitle.arg}}</text> 和
          <text @click=">{{agreementsTitle.policy}}</text>
        </view>
      </checkbox-group>
    </view>
  </view>

需要注意的是这里的代码，要放在 App.vue 里面

<style lang="scss">
	/* 微信中样式 */
	/* #ifdef APP-PLUS ||MP-WEIXIN */
	checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		border: 2rpx solid #dfdfdf; // 将边框颜色深化
		padding: 2px;
		width: 30rpx;
		height: 30rpx;
		color: transparent !important;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); // 添加阴影
		transition: all 0.3s; // 添加过渡效果
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: transparent !important;
		border: 3rpx solid #3E71F4; // 切换到蓝色边框，增大边框宽度
		padding: 2px;
		width: 30rpx;
		height: 30rpx;
		background: #3E71F4 !important; // 选中时的背景色改为蓝色
		box-shadow: 0 0 10px rgba(62, 113, 244, 0.5); // 选中时的阴影效果更明显
		transform: scale(0.9); // 当选中时缩小复选框
	}

	.wx-checkbox-input.wx-checkbox-input-checked {
		// border: none !important;
	}
	/* #endif */
</style>