⽀付宝⼩程序开发——修改⼩程序原⽣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;} 的级联样式也未能处理，暂且不管这个问题了，有时间研究下这个组件内部构造。
htmlradio设置默认的按钮
最终的解决⽅法是，可以给radio设置透明的color值，这样上边的选中图标就看不到了。如果这个图标不影响其他元素遮盖的元素没有单击
事件或者其他⼿动触发事件的话，倒是也没有什么影响。<radio class="vc" color="rgba(0,0,0,0)" value="{{index}}"  />
好折腾，如果有时间，还是建议使⽤view组件来模拟吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。