标签：定义 cee box radius 样式 https ble 结构 自己
如下，要做这样的单选按钮，小程序原生的单选按钮使用起来还算是比较方便的，所以选择直接进行样式改造了：
对于微信小程序来说，单选按钮实质上是一个有自己内部结构的组件，内部有自己的元素结构，所以在重定义样式的时候，需要用到组件你内部的元素类名来定义，详见：微信小程序开发——修改小程序原生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; 显示模式，不然中间的圆点不好调居中。
标签：定义 cee box radius 样式 https ble 结构 自己
原文地址：https://www.cnblogs.com/xyyt/p/12127327.html
