Web Code
Login
Sign Up
HTML
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="custom-radio"> <div class="item_color"> <input type="radio" name="color"> <label class="radio-inline" style="background-color: #ab4949;"></label> </div> <div class="item_color"> <input type="radio" name="color"> <label class="radio-inline" style="background-color: #a10808;"></label> </div> <div class="item_color"> <input type="radio" name="color"> <label class="radio-inline" style="background-color: #000000;"></label> </div> <div class="item_color"> <input type="radio" name="color"> <label class="radio-inline" style="background-color: #f89063;"></label> </div> <div class="item_color"> <input type="radio" name="color"> <label class="radio-inline" style="background-color: #fbf5b1;"></label> </div> <div class="item_color"> <input type="radio" name="color"> <label class="radio-inline" style="background-color: #517f48;"></label> </div> </div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100% !important; background: #000 !important; } .custom-radio .item_color { display: inline-block; position: relative; } .custom-radio input[type="radio"] { position: absolute; left: 0; width: 50px; height: 50px; opacity: 0; cursor: pointer; } .custom-radio input[type="radio"] + label { color: #333; font-family: Arial, sans-serif; font-size: 14px; width: 50px; height: 50px; margin: 0 5px; } .custom-radio input[type="radio"]:checked + label { opacity: 1; border: 6px double #ffffff; }
JS
Output