微信小程序自定义按钮样式笔记

wxss部分：

radio .wx-radio-input {

  width: 40rpx!Important;//一定要加Important，否则样式无法生效

  height: 40rpx!Important;

  border-radius: 100%!Important;

  background: none!Important;

}

 

/*单选按钮选中后内部样式*/

radio .wx-radio-input.wx-radio-input-checked {

  border: 1rpx solid #3cbcee !important;

}

 

radio .wx-radio-input.wx-radio-input-checked::before {

  width: 60%;

  height: 60%;

  background: #3cbcee;

  border-radius: 100%;

  content: '';

  transform: translate(-50%, -50%) scale(1);

  -webkit-transform: translate(-50%, -50%) scale(1);

}

wxml部分：

 <radio bindtap="changRadio" checked="{{checked}}" ></radio>

注意：wxss中的radio样式一定要加important，否则不会生效