小程序(原生) radio 样式修改

wxml:
 <radio-group class="sex-check">
        <label class="radio">
          男<radio value="sex1" checked="{{form.sex==1?true:false}}" color="#fff"/>
        </label>
        <label class="radio">
          女<radio value="sex2" checked="{{form.sex==2?true:false}}"/>
        </label>
  </radio-group>


wxss:


/* radio样式修改 */
/* 单选、多选 勾选 */
/* 默认背景样式*/
radio .wx-radio-input{
  width: 20rpx;
  height: 20rpx;
  background-color: #fff!important;
  text-align: center;
  line-height: 20rpx;
}
 /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
 radio .wx-radio-input.wx-radio-input-checked {
   border-color: #333!important;
   opacity: 0.5;
   background: #fff!important;
   border:node;
 }
  
 /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
 radio .wx-radio-input.wx-radio-input-checked::before {
  /* 去除对号 */
  content: ''; 
  /* content: '对';  */
  border-radius: 50%;
  background-color: #333!important;
  opacity: 1;
  width: 20rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  height: 20rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  line-height: 20rpx;
  border: none;
  text-align: center;
  border: none;
 }


版权声明:本文为weixin_44805839原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。