پیشنمایش زنده
کد HTML
<div class="radio-input">
<input value="value-1" name="value-radio" id="value-1" type="radio" class="input i_female">
<input value="value-2" name="value-radio" id="value-2" type="radio" class="input i_no-gender">
<input value="value-3" name="value-radio" id="value-3" type="radio" class="input i_male">
<div class="card female">
<svg class="logo" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15.75A7.125 7.125 0 1 0 12 1.5a7.125 7.125 0 0 0 0 14.25Z"></path>
<path d="M12 15.75v6.75"></path>
<path d="M14.719 19.5H9.28"></path>
</svg>
<div class="title">Female</div>
</div>
<div class="card no-gender">
<svg class="logo" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M10.125 15.75a6.375 6.375 0 1 0 0-12.75 6.375 6.375 0 0 0 0 12.75Z"></path>
<path d="M10.125 16.5v6"></path>
<path d="M12.75 19.5H7.5"></path>
<path d="M20.25 5.25V1.5H16.5"></path>
<path d="M15.717 6.034 20.25 1.5"></path>
</svg>
<div class="title">N/A</div>
</div>
<div class="card male">
<svg class="logo" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M10.125 21a7.125 7.125 0 1 0 0-14.25 7.125 7.125 0 0 0 0 14.25Z"></path>
<path d="M21 7.5V3h-4.5"></path>
<path d="M15.188 8.813 21 3"></path>
</svg>
<div class="title">Male</div>
</div>
</div>
کد CSS
/* Gender selector made by: csozi | Website: www.csozi.hu*/
.radio-input {
display: flex;
flex-wrap: wrap;
width: 320px;
height: fit-content;
gap: 10px;
scale: 0.7;
}
.radio-input input {
height: 100px;
width: 100px;
translate: 0px 55px;
opacity: 0;
z-index: 10;
}
.card {
height: 100px;
width: 100px;
border: solid darkgray;
background-color: lightgray;
border-radius: 10px;
translate: 0px -55px;
position: relative;
z-index: 9;
transition: 0.2s;
color: darkgray;
}
.logo {
position: absolute;
top: 10px;
left: 50%;
translate: -50% 0px;
}
.card .title {
width: 100%;
position: absolute;
text-align: center;
font-size: 23px;
bottom: 0px;
font-weight: bold;
}
.i_female:hover ~ .female {
filter: brightness(1.1);
}
.i_male:hover ~ .male {
filter: brightness(1.1);
}
.i_no-gender:hover ~ .no-gender {
filter: brightness(1.1);
}
.i_female:checked ~ .female {
border: solid #ff87bf;
color: #ff87bf;
background-color: #ffb8d9;
}
.i_male:checked ~ .male {
border: solid #3d44ff;
color: #3d44ff;
background-color: #85a5ff;
}
.i_no-gender:checked ~ .no-gender {
border: solid #c9c600;
color: #c9c600;
background-color: #fffd82;
}