微信小程序--自定义radio单选框默认样式

<radio-group class="classify" bindchange="radioChange">
    <label class="classify-label" wx:for-items="{{classify}}" wx:key="name">
      <radio value="{{item.name}}" checked="{{item.checked}}" /> <text class="classify-text">{{item.value}}</text>
    </label>
</radio-group>
/* 未选中的 背景样式 */
radio .wx-radio-input{ 
    height: 36rpx; 
    width: 36rpx;
    border-radius: 50%;
    background: transparent;
 }
/* 选中后的 背景样式 */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
}
/* 选中后的 对勾样式 */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50%;
   width: 36rpx; 
   height: 36rpx;
   line-height: 36rpx;
   text-align: center;
   font-size:36rpx; 
   color:#fff;
   background: #33c9ff;
   border: 6rpx solid #33c9ff;
}

猜你喜欢

转载自blog.csdn.net/qq_25174701/article/details/88046366