小程序 之修改radio默认样式

一、效果图

二、代码

/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */

radio .wx-radio-input.wx-radio-input-checked {
  border-color: #03a9f4;
  background: #03a9f4;
}

/* 自定义样式.... */

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::before {
  border-radius: 50%; /* 圆角 */
  width: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  height: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  line-height: 40rpx;
  text-align: center;
  font-size: 30rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: #f00;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
<radio-group class="radio-group weui-input" bindchange="radioChange">
      <radio style="margin-right:10rpx;" class="radio" wx:for-items="{{items}}" wx:for-index="i" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
          <image style="display:inline-block; width:80rpx;height:30rpx;" src="https://www.boyuan.com/file/image/star{{3-i}}.gif"></image>
       </radio>
</radio-group>

  

const app = getApp();
Page({
  data: {
    items: [
      { name: ‘‘, value: ‘3‘, checked: ‘true‘},
      { name: ‘‘, value: ‘2‘ },
      { name: ‘‘, value: ‘1‘ }
    ]
  },
  onLoad: function (options) {
    this.setData({
      itemid: options.itemid
    })
  },
  onShow: function () {

  },
  radioChange: function (e) {
    console.log(‘radio发生change事件,携带value值为:‘, e.detail.value)
  }
})

  

原文地址:https://www.cnblogs.com/yang-2018/p/11741831.html

时间: 2024-11-06 09:49:06

小程序 之修改radio默认样式的相关文章

微信小程序——button, swiper等默认样式更改

微信开发工具里面,无法展示编译后的一些样式,如::before,::after这些伪类.有时候我们需要修改一些组件的默认样式会略感到麻烦,因为不知道是通过哪里控制的. 我就平常遇到的一些修改默认样式,做一下汇总,不定期更新: 1.button的背景色,边框,圆角: button{ background-color: transparent; } button::after { border: 0; border-radius:0 } 2.swiper 的点的位置: .wx-swiper-dots

支付宝小程序开发——修改小程序原生radio默认样式

如下,要做这样的单选按钮,小程序原生的单选按钮使用起来还算是比较方便的,所以选择直接进行样式改造了: 对于微信小程序来说,单选按钮实质上是一个有自己内部结构的组件,内部有自己的元素结构,所以在重定义样式的时候,需要用到组件你内部的元素类名来定义,详见:微信小程序开发——修改小程序原生checkbox.radio默认样式. 不同于微信小程序,支付宝小程序的大部分组件及样式跟Html都比较接近的.对于单选按钮,则与html标签类似,可以采用同样的方法进行样式修改.具体如下: /* 单选按钮样式*/

修改input默认样式

不说话,直接上代码 不需要图片,css解决 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /&g

微信小程序尺寸单位rpx以及样式相关介绍

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0 微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx =

怎么修改单选框radio默认样式

jQuery 实现下这个效果,因此不一定是最佳方案,背景图直接从网上找到.:)先把 HTML 码好: <div>   <input type="radio" id="nba" checked="checked" name="sport" value="nba">   <label name="nba" class="checked" fo

小程序地址左滑默认删除

我们在开发小程序时,总会遇到一些删除功能列表的操作,触屏左滑操作,即显示可操作删除按钮; 首先,我们需要在components里边注册一个组件, 我们在 components中创建一个slide目录,然后在新建Component,命名为slide,这样就自动生成slide组件 我们就在slide.wxml中写入 <!--slide-view/slide-view.wxml--> <movable-area class="container" style="w

修改select默认样式,兼容IE9

前面有篇文章已经提供了如何修改select标签的默认样式,但是只能兼容到ie10,要兼容ie9只能模拟一个类似的 html结构: <div class="select_diy"> <select> <option value="产品咨询1">产品咨询1</option> <option value="产品咨询2">产品咨询2</option> <option value

修改select 默认样式

删除select默认样式图标 appearance:none;-moz-appearance:none;-webkit-appearance:none; 修改样式图标 background: url('../image/getCustomer/arrow_select.png') no-repeat scroll right center #e9f5fe; 原文地址:https://www.cnblogs.com/gosimple/p/8376388.html

微信小程序 text属性设置 WXSS样式

>微信小程序的布局css样式 参考自  珺L 文字 width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ font-family:"宋体";   /*设置字体为宋体*/ ----------------------