您好,欢迎来到筏尚旅游网。
搜索
您的当前位置:首页支付宝小程序开发——修改小程序原生radio默认样式

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

来源:筏尚旅游网
⽀付宝⼩程序开发——修改⼩程序原⽣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值,这样上边的选中图标就看不到了。如果这个图标不影响其他元素遮盖的元素没有单击

事件或者其他⼿动触发事件的话,倒是也没有什么影响。

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- efsc.cn 版权所有 赣ICP备2024042792号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务