Radio by coding-masala
#e8e8e8
1.radio-group { 2 display: flex; 3 flex-direction: column; 4} 5 6.radio-label { 7 display: flex; 8 align-items: center; 9 padding: 0.5em; 10 margin-bottom: 0.5em; 11 background-color: rgb(17, 17, 17); 12 border: 1px solid #ccc; 13 border-radius: 4px; 14 transition: background-color 0.2s, border-color 0.2s; 15 color: #fff; 16} 17 18.radio-label:hover { 19 background-color: #000000; 20} 21 22.radio-input { 23 position: absolute; 24 opacity: 0; 25} 26 27.radio-input:checked + .radio-label { 28 background-color: #b80000; 29 border-color: #ff1111; 30} 31 32.radio-input:focus + .radio-label { 33 outline: 2px solid #ff1111; 34} 35 36.radio-inner-circle { 37 display: inline-block; 38 width: 1em; 39 height: 1em; 40 border: 2px solid rgb(255, 255, 255); 41 border-radius: 50%; 42 margin-right: 0.5em; 43 transition: border-color 0.2s; 44 position: relative; 45} 46 47.radio-label:hover .radio-inner-circle { 48 border-color: rgb(233, 233, 233); 49} 50 51.radio-input:checked + .radio-label .radio-inner-circle { 52 border-color: #ff1111; 53} 54 55.radio-input:checked + .radio-label .radio-inner-circle::after { 56 content: ''; 57 display: block; 58 width: 0.5em; 59 height: 0.5em; 60 background-color: #ff1111; 61 border-radius: 50%; 62 position: absolute; 63 top: 50%; 64 left: 50%; 65 transform: translate(-50%, -50%); 66} 67
1.1K views
Variation of aradio
MIT License