input选框调整css位置

Question

要写成图1这样的，但是实际上选框是图二这样的，该怎么调整呢
---------图1-----------

---------图二-----------

<div class="fdsyrzdcrs">
    <div class="fdsyrcheckcrs">
        <input class="beneficiarycheck" id="" type="radio" name="resRadio" value="1" onclick="getValuecrs(this)"/>
        <label for='fading'>全部是仅为中国税收居民</label>
    </div>
    <div class="fdsyrcheckcrs">
        <input class="beneficiarycheck" id="" type="radio" name="resRadio" value="2" onclick="getValuecrs(this)"/>
        <label class="crs_taxation_write" for="zhiding">部分是非居民或既是中国税收居民又是其他国家（地区）税收居民</label>
    </div>
    <div class="fdsyrcheckcrs">
        <input class="beneficiarycheck" id="" type="radio" name="resRadio" value="3" onclick="getValuecrs(this)"/>
        <label for="zhiding">全部是非居民或既是中国税收居民又是其他国家（地区）税收居民</label>
    </div>
    <div class="fdsyrcheckcrs">
        <input class="beneficiarycheck" id="" type="radio" name="resRadio" value="4" onclick="getValuecrs(this)"/>
        <label for="zhiding">本人确认上述信息的真实、准确和完整，且当这些信息发生变更时，将在30日内通知贵机构，否则本人承担由此造成的不利后果，点击声明文本前的勾选框，可进行勾选</label>
    </div>

.fdsyrzdcrs{
    background: #fff;
    line-height:1rem;
    padding:0.4rem 0;
    box-sizing: border-box;
}
.fdsyrcheckcrs{
    margin-top: 0.5rem;
    margin-left: 0.4rem;
    position: relative;
    /* width: 90%; */
    height: 100%;
}
.fdsyrcheckcrs input[type=radio]:before {
    position: absolute;
    /* top: 20%; */
    content: "";
    width: 0.84rem;
    height: 0.84rem;
    margin-top: -0.36rem;
    display: inline-block;
    background: url(../images/icon_check.png) no-repeat;
    background-size: cover;
    text-decoration: none;
    border-radius: 0;
    -webkit-font-smoothing: antialiased;
    /*background-size: 0.8rem 0.8rem;*/
    -webkit-appearance:none;
    padding:0!important;
    margin-left:0!important;
    margin-right:0!important;
}
.fdsyrcheckcrs input[type=radio]:checked:before {
      background: url(../images/icon_check.png) no-repeat 0 100%;
    background-size:cover;
     -webkit-appearance:none;
    padding:0!important;
    margin-left:0!important;
    margin-right:0!important;
    height: 0.8rem;
}

Answer 1

.fdsyrzdcrs{
            background: #fff;
            line-height:1rem;
            padding:0.4rem 0;
            box-sizing: border-box;
        }
        .fdsyrcheckcrs{
            margin-top: 0.5rem;
            margin-left: 0.4rem;
            position: relative;
            /* width: 90%; */
            height: 100%;
            display: flex;
        }
        .fdsyrcheckcrs input{
            display: block;
            height: 1rem;
        }
        .fdsyrcheckcrs label{
            display: block;
            width: 90%;
        }
        .fdsyrcheckcrs input[type=radio]:before {
            position: absolute;
            /* top: 20%; */
            content: "";
            width: 0.84rem;
            height: 0.84rem;
            margin-top: -0.36rem;
            display: inline-block;
            /*background: url(../images/icon_check.png) no-repeat;*/
            background-size: cover;
            text-decoration: none;
            border-radius: 0;
            -webkit-font-smoothing: antialiased;
            /*background-size: 0.8rem 0.8rem;*/
            -webkit-appearance:none;
            padding:0!important;
            margin-left:0!important;
            margin-right:0!important;
        }
        .fdsyrcheckcrs input[type=radio]:checked:before {
            /*background: url(../images/icon_check.png) no-repeat 0 100%;*/
            background-size:cover;
            -webkit-appearance:none;
            padding:0!important;
            margin-left:0!important;
            margin-right:0!important;
            height: 0.8rem;
        }