原生 input radio 优化

男
女
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        div {
          position: relative;
          line-height: 30px;
        }
        
        input[type="radio"] {
          width: 20px;
          height: 20px;
          opacity: 0;
        }
        
        label {
          position: absolute;
          left: 5px;
          top: 8px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 1px solid #999;
        }
        
        /* 这只check 之后的样式 */
        input:checked+label {
          background-color: #0090FF;
          border: 1px solid #0090FF;
        }
        
        input:checked+label::after {
          position: absolute;
          content: "";
          width: 5px;
          height: 10px;
          top: 3px;
          left: 6px;
          border: 2px solid #fff;
          border-top: none;
          border-left: none;
          transform: rotate(45deg)
        }
    </style>
    <body>
    <form>
          <div>
            <input id="nan" type="radio" name="sex" checked>
            <label for="nan"></label>
            <span style="margin-left: 10px">男</span>
          </div>
          <div>
            <input id="nv" type="radio" name="sex">
            <label for="nv"></label>
            <span style="margin-left: 10px">女</span>
          </div>
        </form>
    </body>
</html>