#e8e8e8
1.radio-input { 2 background-color: #fff; 3 padding: 20px; 4 border-radius: 20px; 5 display: flex; 6} 7 8.radio-input input[type=radio] { 9 display: none; 10} 11 12.radio-input input[type=radio] + label { 13 color: #333; 14 font-family: Arial, sans-serif; 15 font-size: 14px; 16} 17 18.radio-input input[type=radio] + label span { 19 display: inline-block; 20 width: 40px; 21 height: 40px; 22 margin: -1px 4px 0 0; 23 vertical-align: middle; 24 cursor: pointer; 25 border-radius: 50%; 26 border: 2px solid #FFFFFF; 27 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); 28 background-repeat: no-repeat; 29 background-position: center; 30 text-align: center; 31 line-height: 44px; 32} 33 34.radio-input input[type=radio] + label span svg { 35 opacity: 0; 36 transition: all 0.3s ease; 37} 38 39.radio-input input[type=radio]#color-1 + label span { 40 background-color: #2ecc71; 41} 42 43.radio-input input[type=radio]#color-2 + label span { 44 background-color: #3498db; 45} 46 47.radio-input input[type=radio]#color-3 + label span { 48 background-color: #f1c40f; 49} 50 51.radio-input input[type=radio]:checked + label span svg { 52 opacity: 1; 53} 54 55.radio-input:has(input[type=radio]#color-1:checked) { 56 background-color: #2ecc71; 57} 58 59.radio-input:has(input[type=radio]#color-2:checked) { 60 background-color: #3498db; 61} 62 63.radio-input:has(input[type=radio]#color-3:checked) { 64 background-color: #f1c40f; 65} 66
1.4K views
1.4K views
Comments
MIT License