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

Posted taohuaya

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序修改radio和checked的默认样式和图标相关的知识,希望对你有一定的参考价值。

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

 

 修改后的单选框样式:

技术图片

 

 

 复选框同理。

 

以上是关于微信小程序修改radio和checked的默认样式和图标的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序radio组件 - 如何改变默认样式大小?

自定义 radio 样式(微信小程序)

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

uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况

微信小程序 - 更改radio和checkbox选中样式

小程序 之修改radio默认样式