小程序清除radio樣式 實例

##樣式1：選中後中間爲圓點
        /*外面的邊框能夠這樣*/
        radio .wx-radio-input{
            height: 44rpx;
            width: 44rpx;
            border-radius: 50%;
            border:1rpx solid #ececec;//替換邊框 隱藏原有邊框
        }
        radio .wx-radio-input.wx-radio-input-checked {
            border: 1rpx solid #ff9325!important;
        }
        /*中間圓點   選中的背景須要是xml中設置*/
        radio .wx-radio-input.wx-radio-input-checked::before {
            border-radius: 50%;
            /* 圓角 */
            width: 20rpx;
            /* 選中後對勾大小，不要超過背景的尺寸 */
            height: 20rpx;
            /* 選中後對勾大小，不要超過背景的尺寸 */
            text-align: center;
            line-height:20rpx!important;
            font-size: 0;
            /* 對勾大小 30rpx */
            color: #fff;
            /* 對勾顏色 白色 */
            background-color: #ff9325;
            transform: translate(-50%, -50%) scale(1);
            -webkit-transform: translate(-50%, -50%) scale(1);
        }
##樣式2：普通改背景
        // radio .wx-radio-input {
         /* 自定義樣式.... */
         height: 40rpx;
         width: 40rpx;
         border-radius: 50%;
         border: 2rpx solid #999;
         background: transparent;
        }
        
        radio .wx-radio-input.wx-radio-input-checked {
         border: none;
        background: #ff9325;
        }
        
        radio .wx-radio-input.wx-radio-input-checked::before {
         border-radius: 50%;
         /* 圓角 */
         width: 45rpx;
         /* 選中後對勾大小，不要超過背景的尺寸 */
        height: 45rpx;
         /* 選中後對勾大小，不要超過背景的尺寸 */
         line-height: 45rpx;
         text-align: center;
         font-size: 28rpx;
         /* 對勾大小 30rpx *
          color: #fff;
          /* 對勾顏色 白色 */
         background: #ff9325;
         transform: translate(-50%, -50%) scale(1);
         -webkit-transform: translate(-50%, -50%) scale(1);
         }複製代碼