{"html":"

\n \n \n \n

\n \n

Female

\n \n

N/A

\n \n

Male

\n\n

","css":"/* Gender selector made by: csozi | Website: www.csozi.hu*/\n\n.radio-input {\n display: flex;\n flex-wrap: wrap;\n width: 320px;\n height: fit-content;\n gap: 10px;\n scale: 0.7;\n}\n\n.radio-input input {\n height: 100px;\n width: 100px;\n translate: 0px 55px;\n opacity: 0;\n z-index: 10;\n}\n\n.card {\n height: 100px;\n width: 100px;\n border: solid darkgray;\n background-color: lightgray;\n border-radius: 10px;\n translate: 0px -55px;\n position: relative;\n z-index: 9;\n transition: 0.2s;\n color: darkgray;\n}\n\n.logo {\n position: absolute;\n top: 10px;\n left: 50%;\n translate: -50% 0px;\n}\n\n.card .title {\n width: 100%;\n position: absolute;\n text-align: center;\n font-size: 23px;\n bottom: 0px;\n font-weight: bold;\n}\n\n.i_female:hover ~ .female {\n filter: brightness(1.1);\n}\n\n.i_male:hover ~ .male {\n filter: brightness(1.1);\n}\n\n.i_no-gender:hover ~ .no-gender {\n filter: brightness(1.1);\n}\n\n.i_female:checked ~ .female {\n border: solid #ff87bf;\n color: #ff87bf;\n background-color: #ffb8d9;\n}\n\n.i_male:checked ~ .male {\n border: solid #3d44ff;\n color: #3d44ff;\n background-color: #85a5ff;\n}\n\n.i_no-gender:checked ~ .no-gender {\n border: solid #c9c600;\n color: #c9c600;\n background-color: #fffd82;\n}"}

ordinary-stingray-85

👁 实时预览

📝 源代码