Pure css to achieve single-box style

1. html code

   < H2 > your favorite fruit </ h2 > 
   < div class = "the INPUT-Radio" > 
       <-! Checked checked property Add -> 
        < the INPUT the above mentioned id = "the Apple" of the type = "Radio" name = "Fruits " the checked /> 
        < label for =" the Apple " > Apple </ label > 
   </ div > 
   < div class =" the INPUT-Radio " > 
         < the INPUT the above mentioned id ="banana" type="radio" name="fruits" />
         <label for="banana">香蕉</label>
   </div>
   <div class="input-radio">
        <input id="orange" type="radio" name="fruits" />
        <label for="orange">橙子</label>
   </div>
   <div class="input-radio">
       <input id="strawberry" type="radio" name="fruits" />
        <label for="strawberry">草莓</label>
   </div>

    

2.css Code

        .input-radio {
              margin: 1em 0;
              display:inline-block;
        }
        .input-radio input[type="radio"] {
            opacity: 0;
        }
        .input-radio input[type="radio"] + label{
            position: relative;
              cursor: pointer;
        }
        .input-radio input[type="radio"] + label::before{
            content: '';
            position: absolute;
            left: -24px;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            border: 1px solid #999;
        }
        .input-radio input[type="radio"] + label::after{
            content: '';
            position: absolute;
            left: -20px;
            top: 4px;
            border-radius: 50%;
            width: 12px;
            height: 12px;
        }
        .input-radio input[type="radio"]:checked + label::before{
            border: 1px solid #24B7E5;
            box-shadow: 0 0 6px #24B7E5;
            transition: all .3s;
        }
        .input-radio input[type="radio"]:checked + label::after{
            background:#24B7E5;
              transition: all .5s;
        }    

3. Effect