Form radio radio button beautification

here is the image:

image.png

The core idea is hidden input elements using css pseudo-elements before and after to simulate the internal and external circle filled circle.
Clever use of the label element for the linkage characteristics input attributes, then the solid inner circle controlled by input checked property display / clear

HTML DOM structure:

  <label for="onlySelf">
    <input type="radio" name="power" id="onlySelf">
    <span>仅自己可见</span>
  </label>
  <label for="onlyDepa">
    <input type="radio" name="power" id="onlyDepa">
    <span>仅部门可见</span>
  </label>

css:

<style>
    label {
      line-height: 30px;
      display: flex;
      align-items: center;
      margin-right: 25px;
      font-size: 14px;
      color: #666;
    }

    label span {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      padding-left: 24px;
      position: relative;
      cursor: pointer;
    }

    label span:before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border: 1px solid #999;
      box-sizing: border-box;
      border-radius: 50%;
      left: 0;
      top: 6px;
    }

    label span:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #09f;
      box-sizing: border-box;
      border-radius: 50%;
      left: 4px;
      top: 10px;
      opacity: 0;
    }

    label input {
      display: none;
    }

    label input:checked~span:before {
      border-color: #09f;
      transition: border-color 0.5s ease-in;
    }

    label input:checked~span:after {
      opacity: 1;
      transition: opacity 0.3s ease-in;
    }
  </style>