微信小程序开发——修改小程序原生checkbox、radio默认样式

复选框：

闲话少说，这里直接介绍如何修改小程序提供的复选框的样式，如原生的是这样的：

需要的是这样的：

示例代码：

/*复选框外框样式*/
checkbox .wx-checkbox-input {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
}
/*复选框外框选中样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border-color: #3cbcee;
}
/*复选框选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 60%;
  height: 60%;
  background: #3cbcee;
  border-radius: 100%;
  content: '';
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

注：复选框选中后内部样式部分，最后两行样式一定要有，不然复选框选中后内部的圆点会不居中（而且不太好调），具体的就不细说了，有兴趣的可以试试：

  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);

如上，还是跟我们修改html原生标签样式是一样的，只不过我们不了解小程序这些原生组件的内部结构罢了。

单选按钮：

仍旧按上面的样式修改，代码如下：

/* 单选按钮样式*/

radio .wx-radio-input {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
  background: none;
}

/*单选按钮选中后内部样式*/

radio .wx-radio-input.wx-radio-input-checked {
  border: 4rpx solid #3cbcee!important;
}

radio .wx-radio-input.wx-radio-input-checked::before {
  width: 60%;
  height: 60%;
  background: #3cbcee;
  border-radius: 100%;
  content: '';
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

如上，样式代码跟复选框的基本一致，直接将checkbox换为radio就可以了。但是有一个地方不一样，就是单选按钮选择后的外框样式需要添加 !Important ,不然不会生效的。

扫描二维码关注公众号，回复： 6247136 查看本文章

如果需要添加禁用标志，也是可以自定义的：

radio.disabled .wx-radio-input {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #eee;
  border-radius: 100%;
  background: none;
}

总结：

虽然官方没有提供原生组件样式修改的入口，但是微信小程序基于微信内置浏览器的X5内核（其实就是Chrome内核），小程序在某些方面和html是很类似的。从上边的例子也可以看出，小程序原生checkbox组件内部是封装了一些我们看不到的东西的，只要我们了解了原生组件内部构造，就可以直接修改组件样式。

目前还没找到有关小程序组件内部类名的相关文档，但感觉可以从小程序编译包中应该有迹可循的，感兴趣的可以去了解下：https://www.cnblogs.com/xyyt/p/9523902.html

微信小程序开发——修改小程序原生checkbox、radio默认样式

猜你喜欢