Trang chủ
Radio UI
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="rdo-wrap"> <div class="rdo-item"> <input type="radio" name="opt" class="rdo-inp" id="rdo-1" value="v1" checked /> <label for="rdo-1" class="rdo-btn"></label> <label for="rdo-1">Label 1</label> </div> <div class="rdo-item"> <input type="radio" name="opt" class="rdo-inp" id="rdo-2" value="v2" /> <label for="rdo-2" class="rdo-btn"></label> <label for="rdo-2">Label 2</label> </div> </div>
CSS
Copy
.rdo-wrap { display: flex; align-items: center; gap: 40px; } .rdo-wrap label { font-size: 16px; } .rdo-inp { display: none; } .rdo-inp:checked + .rdo-btn { box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f43f5e; background-color: #f43f5e; } .rdo-btn { display: inline-block; width: 1rem; height: 1rem; margin-right: 14px; border-radius: 2rem; background: #eee; cursor: pointer; box-shadow: 0 0 0 4px #eee; transition: all 0.1s linear; } #rdo-1, #rdo-2 { width: auto; margin-right: 8px; }
JS
Copy