实现css修改input[type=radio]样式

html标签如下：

   <input
      type="checkbox"
      id="agree"
      class="form-checkbox"
      :checked="checked"
      @change="change"
    />
   <label for="agree" class="form-checkbox__label">
        <span>*I have read and agree to the</span>
        <span>&lt;Terms of Use&gt;</span>
   </label>

      .form-checkbox {
        display: none;
      }
      .form-checkbox__label {
        position: relative;
        padding-left: 20px;
        display: inline-block;
        vertical-align: top;
        line-height: 20px;
        cursor: pointer;
      }

      .form-checkbox__label::before {
        top: 4px;
        left: 0;
        width: 10px;
        height: 10px;
        border: 1px solid #2bb7b3;
        border-radius: 50%;
        box-sizing: content-box;
      }

      .form-checkbox__label::before,
      .form-checkbox__label::after {
        content: "";
        position: absolute;
      }

      .form-checkbox:checked + label::after {
        visibility: visible;
        opacity: 1;
      }

      .form-checkbox__label::after {
        top: 7px;
        left: 3px;
        width: 6px;
        height: 6px;
        background-color: #2bb7b3;
        border-radius: 50%;
        visibility: hidden;
        opacity: 0;
      }