修改radio默认样式

 <input class="radio_type" type="radio" name="type" id="radio1" checked="checked" />
                                        <label for="radio1">radio1</label>
                                        <input class="radio_type" type="radio" name="type" id="radio2" />
                                        <label for="radio2">radio2</label>

 label {
            line-height: 20px;
            display: inline-block;
            margin-left: 5px;
            margin-right: 15px;
            color: #777;
        }

        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
        }

            .radio_type:before {
                content: '';
                width: 20px;
                height: 20px;
                border: 1px solid #7d7d7d;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
            }

            .radio_type:checked:before {
                content: '';
                width: 20px;
                height: 20px;
                border: 1px solid rgb(117,94,143);
                background: rgb(117,94,143);
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
            }

            .radio_type:checked:after {
                content: '';
                width: 10px;
                height: 5px;
                border: 2px solid white;
                border-top: transparent;
                border-right: transparent;
                text-align: center;
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                vertical-align: middle;
                transform: rotate(-45deg);
            }