微信小程序 radio选中样式改为实心圆＜转载＞

wxml

<radio-group bindchange="radioChange"><radio value="是" checked=""><text class="radio-text-laebl">是</text></radio><radio value="否" checked="1"><text class="radio-text-laebl">否</text></radio>
</radio-group>

样式文件进行修改

/* 单选按钮样式*/
radio .wx-radio-input {width: 40rpx;height: 40rpx;border: 4rpx solid #8C8C8C;/* 外圈边框，默认灰色，即未选中状态*/border-radius: 50%;background: none;
}
/*单选按钮选中后内部样式*/
radio .wx-radio-input.wx-radio-input-checked {border: 4rpx solid #00A0E9 !important;/* 外圈边框，选中状态颜色*/background-color: white !important;/* 外圈边框与内圈实心圆间的内容的颜色，不设置就默认是上面的绿色*/
}
/*单选按钮选中后内部中心*/
radio .wx-radio-input.wx-radio-input-checked::before {width: 60%;height: 60%;background: #00A0E9;/* 内圈实心圆选中状态颜色*/border-radius: 50%;content: '';/* 隐藏✔️*/transform: translate(-50%, -50%) scale(1);-webkit-transform: translate(-50%, -50%) scale(1);
}

来自转载:微信小程序修改radio内部样式 - 简书

微信小程序 radio选中样式改为实心圆＜转载＞相关推荐

微信小程序自定义选中样式打小勾
<view class="form-btn {{currentIndex==1?'form-active':''}}" id="1" bindtap=&q ...
微信小程序的多选改变样式_微信小程序radio的样式修改
效果图代码 html部分 {{item.text}} css部分 radio .wx-radio-input.wx-radio-input-checked { border-color: #cc00 ...
微信小程序radio选中
.wxml // 使用三木运算, 控制 checked 的取值为 true 或者 false<view class="radio"><radio value=&q ...
微信小程序radio单选框
微信小程序radio单选框效果: 选中男返回male,选中女返回female wxml: <radio-group bindchange="handlechange"> ...
uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
微信小程序：王者荣耀改重复名,空白名最低战力查询助手
这是一款由重复名,空白名.和各区战力查询组合的一款微信小程序源码! 重复名支持一键生成几十个,就再也不怕都被别人用过了! 空白名支持多种空白名,王者荣耀空白名,贵族居中空白名,QQ微信专属空白名战力 ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...

微信小程序 radio选中样式改为实心圆＜转载＞

微信小程序 radio选中样式改为实心圆＜转载＞相关推荐

最新文章

热门文章