Radio by 3bdel3ziz-T
#e8e8e8
1.select { 2 width: fit-content; 3 cursor: pointer; 4 position: relative; 5 transition: 300ms; 6 color: white; 7 overflow: hidden; 8} 9 10.selected { 11 background-color: #2a2f3b; 12 padding: 5px; 13 margin-bottom: 3px; 14 border-radius: 5px; 15 position: relative; 16 z-index: 100000; 17 font-size: 15px; 18 display: flex; 19 align-items: center; 20 justify-content: space-between; 21} 22 23.arrow { 24 position: relative; 25 right: 0px; 26 height: 10px; 27 transform: rotate(-90deg); 28 width: 25px; 29 fill: white; 30 z-index: 100000; 31 transition: 300ms; 32} 33 34.options { 35 display: flex; 36 flex-direction: column; 37 border-radius: 5px; 38 padding: 5px; 39 background-color: #2a2f3b; 40 position: relative; 41 top: -100px; 42 opacity: 0; 43 transition: 300ms; 44} 45 46.select:hover > .options { 47 opacity: 1; 48 top: 0; 49} 50 51.select:hover > .selected .arrow { 52 transform: rotate(0deg); 53} 54 55.option { 56 border-radius: 5px; 57 padding: 5px; 58 transition: 300ms; 59 background-color: #2a2f3b; 60 width: 150px; 61 font-size: 15px; 62} 63.option:hover { 64 background-color: #323741; 65} 66 67.options input[type="radio"] { 68 display: none; 69} 70 71.options label { 72 display: inline-block; 73} 74.options label::before { 75 content: attr(data-txt); 76} 77 78.options input[type="radio"]:checked + label { 79 display: none; 80} 81 82.options input[type="radio"]#all:checked + label { 83 display: none; 84} 85 86.select:has(.options input[type="radio"]#all:checked) .selected::before { 87 content: attr(data-default); 88} 89.select:has(.options input[type="radio"]#option-1:checked) .selected::before { 90 content: attr(data-one); 91} 92.select:has(.options input[type="radio"]#option-2:checked) .selected::before { 93 content: attr(data-two); 94} 95.select:has(.options input[type="radio"]#option-3:checked) .selected::before { 96 content: attr(data-three); 97} 98
1.6K views
1.6K views
MIT License