Custom Radio Buttons

HTML
<div class="custom-radios"> <div> <input type="radio" id="color-1" name="color" value="color-1" checked> <label for="color-1"> <span> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" /> </span> </label> </div> <div> <input type="radio" id="color-2" name="color" value="color-2"> <label for="color-2"> <span> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" /> </span> </label> </div> <div> <input type="radio" id="color-3" name="color" value="color-3"> <label for="color-3"> <span> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" /> </span> </label> </div> <div> <input type="radio" id="color-4" name="color" value="color-4"> <label for="color-4"> <span> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" /> </span> </label> </div> </div>
SCSS
// Colors $color-1: #2ecc71; $color-2: #3498db; $color-3: #f1c40f; $color-4: #e74c3c; html, body { height: 100%; width: 100%; margin: 0; } body { display: flex; justify-content: center; align-items: center; background-color: #2c3e50; } .custom-radios { div { display: inline-block; } input[type="radio"] { display: none; + label { color: #333; font-family: Arial, sans-serif; font-size: 14px; span { display: inline-block; width: 40px; height: 40px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); background-repeat: no-repeat; background-position: center; text-align: center; line-height: 44px; img { opacity: 0; transition: all .4s ease; } } } &#color-1 + label span { background-color: $color-1; } &#color-2 + label span { background-color: $color-2; } &#color-3 + label span { background-color: $color-3; } &#color-4 + label span { background-color: $color-4; } &:checked + label span img { opacity: 1; } } }
JAVASCRIPT
Expand for more options Login