mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
112 lines
3 KiB
HTML
112 lines
3 KiB
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>
|
|
<style>
|
|
/* From Uiverse.io by csozidev - Tags: simple, button, hover, input, radio, gender, colorful */
|
|
/* 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;
|
|
}
|
|
</style>
|