微信小程序修改checkbox和radio的样式

分类:前端技术作者:Aimee时间:2018-02-07 09:02:08访问量:16060

在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio的样式会有些不同。

  1. 修改checkbox样式

.wxml

<checkbox-group class='pull-left' bindchange="checkboxChange">

  <label class="checkbox flex flex-vc ">

    <checkbox bindchange='checkboxChange' value="" checked="{{checkboxStatus}}" color='#fff'/>

    <view>可用2000个积分币抵扣</view>

  </label>

</checkbox-group>

.wxss

/* checkbox未选中时样式 */

checkbox .wx-checkbox-input{  
   /* 自定义样式.... */

  border-radius: 3rpx;

  height: 26rpx;

  width: 26rpx;

  margin-top: -4rpx;


}



/* checkbox选中时样式 */

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  /* 自定义样式.... */

  background-color: #e02e24;

  border: 1rpx solid #e02e24;


}


  1. 修改radio样式

.wxml

<radio-group class="radio-group" bindchange="radioChange">

  <label class="radio" wx:for="{{items}}">

    <radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}}

  </label>
</radio-group>

.wxss

/* radio未选中时样式 */ 

radio .wx-radio-input{ 
  /* 自定义样式.... */

    border-radius: 3rpx; 

    height: 26rpx; 

    width: 26rpx;

    margin-top: -4rpx;


 }



 /* radio选中时样式 */ 

radio .wx-radio-input.wx-radio-input-checked::before{
    /* 自定义样式.... */ 

    background-color: #e02e24; 

    border: 1rpx solid #e02e24;

     

}

 

推荐阅读最新资讯 →

Foreign Exchange....

Foreign Exchange Rates and Currency Exchange Rate ....

查看详情

Что такое биржа ....

Что такое биржа Форекс и как научиться трейдингу с....

查看详情

How to start tra....

How to start trading with no money This can lead t....

查看详情
联系我们