微信小程序修改radio和checkbox的默认样式和图标
wxml:
<view class="body">
<view class="body-content">
第1题:企业的价值观是 ?
</view>
<view class="label">单选</view>
</view>
<view class="options"> <radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}" wx:key="{{index}}">
<view>
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</view>
</label> </radio-group> </view>
我们看一下原生的效果:
修改wxml中的redio 组件的color属性:
<radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}}
wxss(只有修改样式的部分):
/* 单选、多选 勾选 */ /*radio未选中时样式 */
radio .wx-radio-input{
/* 自定义样式.... */
/* 我这里没有进行,未选中的样式修改
height: 40rpx;
width: 40rpx;
margin-top: -4rpx;
border-radius: 50%;
border: 2rpx solid #999;
background: transparent;
*/ } /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked {
/* border: none; */
border-color: #2792ff!important;
/* background-color: #fff!important; */
/* background-color: transparent!important; */
/* 居中 */
/*
display: flex;
justify-content: center;
align-items: center;
*/ } /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked::before {
/* 去除对号 */
content: '';
/* background: #fff; */
width: 36rpx;
height: 36rpx;
border-radius: 50%;
/* background: red; */
background-color: #2792ff;
/* 居中 */
/* margin-top: 0rpx; */
/* display: flex; */
/* position: relative; */ }
修改后的单选框样式:
复选框同理。
wxml:
<view class="body">
<view class="body-content">
第1题:企业的价值观是 ?
</view>
<view class="label">多选</view>
</view>
<view class="options"> <checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<view>
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </view>
</label>
</checkbox-group> </view>
wxss:
/*checkbox未选中时样式 */
checkbox .wx-checkbox-input{
/* 自定义样式.... */
border-radius: 50%; } /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
/* border: none; */
border-radius: 50%;
border-color: #2792ff!important; } /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
/* 去除对号 */
content: '';
/* background: #fff; */
width: 36rpx;
height: 36rpx;
border-radius: 50%;
/* background: red; */
background-color: #2792ff;
/* 居中 */
/* margin-top: 0rpx; */
/* display: flex; */
/* position: relative; */ }
修改前后对比:
前:后
参考(感谢作者):https://blog.csdn.net/weixin_41871290/article/details/82686719
微信小程序修改radio和checkbox的默认样式和图标的更多相关文章
- 微信小程序radio组件 - 如何改变默认样式大小?
今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- 微信小程序修改checkbox的样式
修改前: 修改后: wxml代码: <checkbox class="checkbox" /> wxss代码: /* checkbox选中钱样式 */ checkbox ...
- 微信小程序——动态修改页面数据(和样式)及参数传递
1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...
- 更改checkbox的默认样式
最近做一个vue项目要用到checkbox要修改默认样式,选中是纯白色,不选择只有白色边框,起初以为很容易,没想到还折腾了一翻,记录一下. 几经折腾,理清input 和label的关系 最终改进版本, ...
- 微信小程序如何引入外部字体库iconfont的图标
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...
- 改变checkbox的默认样式
针对于CheckBox默认样式的改变,和选中状态的改变 <label class="checkBox"><input type="checkbox&qu ...
随机推荐
- WEB-INF目录下登录表单提交的重定向
问题描述 登陆表单提交跳转后刷新会重新提交表单,但是使用重定向时不走视图解析器,不能访问WEB-INF下的资源 解决方法 原方法 @RequestMapping(value = "/logi ...
- [Phoenix] Mix 命令
mix phx.gen.html 命令生成模板: # 其中 name 和 age 是 schema 字段名称,后面跟的是类型 # 下面这样的写法,会生成 controller 和 service 层的 ...
- Flutter用dio封装http网络请求,设置统一的请求地址、headers及处理返回内容
封装http请求是项目中经常需要做的,常用于设置通用请求地址.请求headers以及处理返回结果,例如在项目中开发地址.测试地址.上线地址是不一样的,当在封装的请求设置好默认地址之后只需要改一个地址而 ...
- arcgis python 列出一个表所有字段
import arcpy inFeature = arcpy.GetParameterAsText(0) #原始数据 try: fieldList = arcpy.ListFields(inFeatu ...
- ArcGIS超级工具-征地部标准坐标导出导入 SPTOOLS
ArcGIS超级工具简称SPTOOLS 1.1征地部标准坐标导出 界面如下: 操作视频: https://weibo.com/tv/v/HvpNBrfeq?fid=1034:4374872936357 ...
- ServletConfig对象的使用
作用: * 获取Servlet的配置信息 * 获取ServletContext对象 *主要是用于加载servlet的初始化参数.在一个web应用可以存在多个ServletConfig对象(一个Serv ...
- linux:解决SSH连接Linux超时自动断开
用SSH登录到Linux的时候,由于默认的连接超时时间很短,经常断开! 1.修改文件 # vi /etc/ssh/sshd_config 2.重启sshd服务 # /etc/init.d/sshd r ...
- smarty 模板几个例子(变量调节器)
一.assign和display方法的使用以及几个变量调节器 header("content-type:text/html;charset=utf-8");//加载Smarty引擎 ...
- centos6.x一直停留在进度条的问题
由于屏幕关闭加上长时间没有操作可能导致centos进行深度休眠,此时只能通过电源键来强制重启.可以通过修改X11的配置来禁止休眠,配置文件为/etc/X11/xorg.conf,注意修改此文件前记得备 ...
- linux LVM 系统盘扩容
1.fdisk /dev/sda2.输入n,开始创建新分区3.输入p4.输入w5.mkfs.ext4 /dev/sda36.pvcreate /dev/sda37.vgdisplay 查看VG nam ...