純css實現單選框樣式

1. html代碼

   <h2>你最喜歡的水果</h2>
   <div class="input-radio">
       <!-- 選中狀態添加 checked 屬性 -->
        <input id="apple" type="radio" name="fruits" checked />
        <label for="apple">蘋果</label>
   </div>
   <div class="input-radio">
         <input 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代碼

        .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.效果