脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序修改radio和checkbox的默认样式和图标

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

 更新时间：2019年07月24日 11:22:57   作者：暗恋桃花源丫  
这篇文章主要介绍了微信小程序修改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; */
 
}

修改前后对比：

前

后

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 利用javascript如何随机生成一定位数的密码

    利用javascript如何随机生成一定位数的密码

    这篇文章主要给大家介绍了关于利用javascript如何随机生成一定位数的密码的相关资料，文中给出了详细的示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • js获取页面传来参数的方法

    js获取页面传来参数的方法

    这篇文章主要介绍了通过window.location.search来获取页面传来的参数，经测试是OK的
    2014-09-09
  • JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

    JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

    这篇文章主要介绍了JS实现滑动菜单效果代码,以实例形式实现了包括Tab,选项卡,横向等效果,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • JS获取网页图片name属性的方法

    JS获取网页图片name属性的方法

    这篇文章主要介绍了JS获取网页图片name属性的方法,涉及javascript操作图片属性的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JS实现放烟花效果

    JS实现放烟花效果

    这篇文章主要为大家详细介绍了JS实现放烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • javascript动态创建表格及添加数据实例详解

    javascript动态创建表格及添加数据实例详解

    这篇文章主要介绍了javascript动态创建表格及添加数据,以实例形式分析了javascript动态创建表格的常用方法,包括不兼容IE6与兼容IE6的实现方法,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • javascript循环链表之约瑟夫环的实现方法

    javascript循环链表之约瑟夫环的实现方法

    这是一道比较经典的循环链表问题，在华为上机笔试中也出现过。 约瑟夫环是一个数学的应用问题，下面这篇文章主要就给大家介绍了javascript循环链表之约瑟夫环的实现方法，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-01-01
  • JS倒计时实例_天时分秒

    JS倒计时实例_天时分秒

    下面小编就为大家带来一篇JS倒计时实例_天时分秒。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • request请求获取参数的实现方法(post和get两种方式)

    request请求获取参数的实现方法(post和get两种方式)

    下面小编就为大家带来一篇request请求获取参数的实现方法(post和get两种方式)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 详解如何准确判断JavaScript中的数据类型

    详解如何准确判断JavaScript中的数据类型

    JavaScript中,我们经常需要判断数据类型以便于正确地处理数据,本文将介绍JavaScript中的数据类型判断技术,包括typeof操作符、instanceof操作符、Object.prototype.toString方法以及ES6新增的一些数据类型判断方法,需要的朋友可以参考下
    2023-08-08

最新评论