How does CSS Customize the radio radio box style? (Code implementation)

What this article brings to you is about how CSS customizes radio radio box style? (Code implementation), there is a certain reference value, the need for friends can refer to, I hope to help you.

HTML section

<div class= "Radio" >    <label>        <input name= "Feel" type= "Radio" value= "Love"/>        <span class= "pos" >            <span class= "RADIO_BG" >                <span class= "radio_on" ></span>            </span >        </span>        <span>LOVE</span>    </label>    <label>        <input Name= "Feel" type= "Radio" value= "hate"/>        <span class= "pos" >            <span class= "RADIO_BG" >                <span class= "radio_on" ></span>            </span>        </span>        <span>you is nice </span>    </label></div>

CSS Styles Section

            . radio {width:260px;                height:26px;                line-height:26px;                margin:200px Auto;                Background-color: #ddeef1;                font-size:16px;                Color: #495060;            Text-align:center;            } label:first-child {margin-right:40px;            } label input,. radio_on {display:none;                }. pos {display:inline;            Vertical-align:middle;              }. radio_bg {position:relative;              Display:inline-block;              height:14px;              width:14px;              border:1px solid #B3B4B8;            border-radius:50%; } label:hover. RADIO_BG, label input:checked + span.pos SPAN.RADIO_BG {border:1px solid            #27B28B; } Label input:checked + Span.pos span.radio_bg. radio_on {display:inline-block;              Position:absolute;              top:2px;              left:2px;              width:10px;              height:10px;              border-radius:50%;            Background-color: #27B28B; }