Radio by csozidev
#e8e8e8
1/* Gender selector made by: csozi | Website: www.csozi.hu*/ 2 3.radio-input { 4 display: flex; 5 flex-wrap: wrap; 6 width: 320px; 7 height: fit-content; 8 gap: 10px; 9 scale: 0.7; 10} 11 12.radio-input input { 13 height: 100px; 14 width: 100px; 15 translate: 0px 55px; 16 opacity: 0; 17 z-index: 10; 18} 19 20.card { 21 height: 100px; 22 width: 100px; 23 border: solid darkgray; 24 background-color: lightgray; 25 border-radius: 10px; 26 translate: 0px -55px; 27 position: relative; 28 z-index: 9; 29 transition: 0.2s; 30 color: darkgray; 31} 32 33.logo { 34 position: absolute; 35 top: 10px; 36 left: 50%; 37 translate: -50% 0px; 38} 39 40.card .title { 41 width: 100%; 42 position: absolute; 43 text-align: center; 44 font-size: 23px; 45 bottom: 0px; 46 font-weight: bold; 47} 48 49.i_female:hover ~ .female { 50 filter: brightness(1.1); 51} 52 53.i_male:hover ~ .male { 54 filter: brightness(1.1); 55} 56 57.i_no-gender:hover ~ .no-gender { 58 filter: brightness(1.1); 59} 60 61.i_female:checked ~ .female { 62 border: solid #ff87bf; 63 color: #ff87bf; 64 background-color: #ffb8d9; 65} 66 67.i_male:checked ~ .male { 68 border: solid #3d44ff; 69 color: #3d44ff; 70 background-color: #85a5ff; 71} 72 73.i_no-gender:checked ~ .no-gender { 74 border: solid #c9c600; 75 color: #c9c600; 76 background-color: #fffd82; 77}
1.8K views
1.8K views
MIT License