• 2020-07-14

    Custom CSS radio

    Comments

    Start a discussion

    <label>
      <input type="radio" name="group">
      <span>Radio1</span>
    </label>
    body-center {
      display: flex;
    }
    
    span {
      display: flex;
      align-items: center;
    }
    
    span:before {
      content: '';
      height: 24px;
      width: 24px;
      background: #eee;
      display: block;
      margin-right: .5rem;
      border-radius: 100vh;
      box-sizing: border-box;
    }
    
    input {
      display: none;
    }
    
    label input:checked ~ span:before {
      background-color: blue;
      box-shadow: inset 0 0 0 2px blue, inset 0 0 0 .33rem #fff;
    }

    Sources