微信小程序修改radio内部样式

Posted 2023-04-06

参考技术A 微信小程序中，默认样式为：

但是有时我们需要它的中间是个圆

我们主要是对样式文件进行修改

支付宝小程序开发——修改小程序原生radio默认样式

如下，要做这样的单选按钮，小程序原生的单选按钮使用起来还算是比较方便的，所以选择直接进行样式改造了：

对于微信小程序来说，单选按钮实质上是一个有自己内部结构的组件，内部有自己的元素结构，所以在重定义样式的时候，需要用到组件你内部的元素类名来定义，详见：微信小程序开发——修改小程序原生checkbox、radio默认样式。

不同于微信小程序，支付宝小程序的大部分组件及样式跟Html都比较接近的。对于单选按钮，则与html标签类似，可以采用同样的方法进行样式修改。具体如下：

/* 单选按钮样式*/
/*单选按钮需要无定位，父级容器需要为相对定位，不然会影响其他单选按钮的选择*/

radio {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
  background: none;
  position: static;
  display: inline-flex !important;
}

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

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

radio-checked::after {
  width: 60%;
  height: 60%;
  background: #3cbcee;
  border-radius: 100%;
  content: \'\';
  margin: auto;
}

radio.disabled {
  border: 4rpx solid #eee;
  border-radius: 100%;
}

注：

1.单选按钮需要无定位，不然中心的圆点无法正常显示。父级容器需要为相对定位，否则会影响其他单选按钮的选择。

2.上边的类名在开发者工具上调试器中都能看到的，除了 radio-checked::after 这种伪类样式不能直接在编辑器中进行调整，其他都是可以的。

3.radio标签使用 inline-flex !important; 显示模式，不然中间的圆点不好调居中。

---

后记：

通过以上方法虽然能覆盖单选按钮样式，但是单选按钮本身的选中层还是会显示的(radio的color属性设置为有色色值，如下）：

如上，由于我们给radio设置了 position: static; 的样式，所以影响了内部元素的文档流输出，所以会产生偏移。

经验证，无法通过给radio设置伪类样式来处理这个选中的图标，可见radio组件内部还是有自己的元素结构的。选中的图标应该是icon组件，但是使用 radio icon{display:none!important;} 的级联样式也未能处理，暂且不管这个问题了，有时间研究下这个组件内部构造。

最终的解决方法是，可以给radio设置透明的color值，这样上边的选中图标就看不到了。如果这个图标不影响其他元素遮盖的元素没有单击事件或者其他手动触发事件的话，倒是也没有什么影响。

<radio class="vc" color="rgba(0,0,0,0)" value="{{index}}"  />

好折腾，如果有时间，还是建议使用view组件来模拟吧。