小程序清除radio样式实例-即速应用

小程序清除radio样式实例

浏览量：2069 时间：2020-01-10 来源：weixin_34192816

##样式1：选中后中间为圆点        /*外面的边框可以这样*/        radio .wx-radio-input{            height: 44rpx;            width: 44rpx;            border-radius: 50%;            border:1rpx solid #ececec;//替换边框 隐藏原有边框        }        radio .wx-radio-input.wx-radio-input-checked {            border: 1rpx solid #ff9325!important;        }        /*中间圆点   选中的背景需要是xml中设置*/        radio .wx-radio-input.wx-radio-input-checked::before {            border-radius: 50%;            /* 圆角 */            width: 20rpx;            /* 选中后对勾大小，不要超过背景的尺寸 */            height: 20rpx;            /* 选中后对勾大小，不要超过背景的尺寸 */            text-align: center;            line-height:20rpx!important;            font-size: 0;            /* 对勾大小 30rpx */            color: #fff;            /* 对勾颜色 白色 */            background-color: #ff9325;            transform: translate(-50%, -50%) scale(1);            -webkit-transform: translate(-50%, -50%) scale(1);        }##样式2：普通改背景        // radio .wx-radio-input {         /* 自定义样式.... */         height: 40rpx;         width: 40rpx;         border-radius: 50%;         border: 2rpx solid #999;         background: transparent;        }                radio .wx-radio-input.wx-radio-input-checked {         border: none;        background: #ff9325;        }                radio .wx-radio-input.wx-radio-input-checked::before {         border-radius: 50%;         /* 圆角 */         width: 45rpx;         /* 选中后对勾大小，不要超过背景的尺寸 */        height: 45rpx;         /* 选中后对勾大小，不要超过背景的尺寸 */         line-height: 45rpx;         text-align: center;         font-size: 28rpx;         /* 对勾大小 30rpx *          color: #fff;          /* 对勾颜色 白色 */         background: #ff9325;         transform: translate(-50%, -50%) scale(1);         -webkit-transform: translate(-50%, -50%) scale(1);         }复制代码

小程序

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。