微信小程序如何修改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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python代码制作configure文件示例
2014/07/28 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python中print函数简单使用总结
2019/08/05 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
班级入场式解说词
2014/02/01 职场文书
开学典礼演讲稿
2014/05/23 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
社区党务工作总结2015
2015/05/19 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
Ruby处理CSV数据方法详解
2022/04/18 Ruby