微信小程序如何修改radio和checkbox的默认样式和图标


Posted in Javascript onJuly 24, 2019

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>

我们看一下原生的效果:

微信小程序如何修改radio和checkbox的默认样式和图标

修改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; */
 
}

修改后的单选框样式:

微信小程序如何修改radio和checkbox的默认样式和图标

复选框同理

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; */
 
}

修改前后对比:

微信小程序如何修改radio和checkbox的默认样式和图标

微信小程序如何修改radio和checkbox的默认样式和图标

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
Vue封装的组件全局注册并引用
Jul 24 #Javascript
vue子路由跳转实现tab选项卡
Jul 24 #Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 #Javascript
Vue.js路由实现选项卡简单实例
Jul 24 #Javascript
vue滚动tab跟随切换效果
Jun 29 #Javascript
Vue.js实现tab切换效果
Jul 24 #Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 #Javascript
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
犀利的js 函数集合
2009/06/11 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
JS中表单的使用小结
2014/01/11 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
用js简单提供增删改查接口
2019/05/12 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python中解析json格式文件的方法示例
2017/05/03 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python读取并写入mat文件的方法
2019/07/12 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
小学生打架检讨书
2014/01/26 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
首次购房证明
2015/06/19 职场文书
HAM-2000摩机图
2021/04/22 无线电
Python进度条的使用
2021/05/17 Python
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
Python实现聚类K-means算法详解
2022/07/15 Python