小程序checkbox和radio样式修改

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-radio-input-disabled,
checkbox .wx-checkbox-input.wx-checkbox-input-checked.wx-checkbox-input-disabled {
  background: #ff6633;
  border-color: #ff6633;
  color: #fff;
}

来源：CSDN

作者：fiona-frontEnd

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

标签

radio

checkbox样式

input

background