小程序checkbox和radio样式修改

最新推荐文章于 2024-09-20 16:35:29 发布

fiona-frontEnd

最新推荐文章于 2024-09-20 16:35:29 发布

阅读量2.3k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/DeliaWen/article/details/98939060

版权

本文介绍了如何修改微信小程序中checkbox和radio的默认样式，包括大小、颜色、圆角等，并展示了不同状态（如禁用、选中）下的样式调整方法。提供了2019年和2020年的代码更新内容。

摘要由CSDN通过智能技术生成

1、没有修改过的默认（禁用）样式：
在这里插入图片描述
2、修改默认样式（大小颜色圆角）

/* 修改默认样式 */
checkbox .wx-checkbox-input,radio .wx-radio-input {
  border-radius: 50%;
  width: 40rpx; 
  height: 40rpx;
  background: #fff;
}

在这里插入图片描述
3、修改checked状态时的样式。为什么不直接在这里修改背景色，因为所有都disabled了，checked的背景色只能修改中间的打钩的部分。

/* 修改checked样式 */
radio .wx-radio-input.wx-radio-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
 color: #fff;
}

在这里插入图片描述
4、修改禁用且checked的样式：


/* 修改禁用且checked的样式 */
radio .wx-radio-input.wx-radio-input-checked.wx-radio-input-disabled,
checkbox .wx-checkbox-input.wx-checkbox-input-checked.wx-checkbox-input-disabled {
  background: #ff6633;
  border-color: #ff6633;
  color: #fff;
}

在这里插入图片描述

完整代码：

/* 修改默认样式 */
checkbox .wx-checkbox-input,radio .wx-radio-input {
  border-radius: 50%; /* 圆角 */
  width: 40rpx; /* 背景的宽 */
  height: 40rpx; /* 背景的高 */
  background: #fff;
}
/* 修改checked样式 */
radio .wx-radio-input.wx-radio-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
 color: #fff;
 background: #ff6633;
}

/* 修改禁用且checked的样式 */
radio .wx-radio-input.wx-radio-input-checked.wx-radi