Radio by coding-masala
#212121
1.radio-buttons { 2 display: flex; 3 flex-direction: column; 4 color: white; 5} 6 7.radio-button { 8 display: flex; 9 align-items: center; 10 margin-bottom: 10px; 11 cursor: pointer; 12} 13 14.radio-button input[type="radio"] { 15 display: none; 16} 17 18.radio-circle { 19 width: 20px; 20 height: 20px; 21 border-radius: 50%; 22 border: 2px solid #aaa; 23 position: relative; 24 margin-right: 10px; 25} 26 27.radio-circle::before { 28 content: ""; 29 display: block; 30 width: 12px; 31 height: 12px; 32 border-radius: 50%; 33 background-color: #ddd; 34 position: absolute; 35 top: 50%; 36 left: 50%; 37 transform: translate(-50%, -50%) scale(0); 38 transition: all 0.2s ease-in-out; 39} 40 41.radio-button input[type="radio"]:checked + .radio-circle::before { 42 transform: translate(-50%, -50%) scale(1); 43} 44 45.radio-button:nth-of-type(1) input[type="radio"]:checked + .radio-circle::before { 46 background-color: #ff6600; 47} 48 49.radio-button:nth-of-type(2) input[type="radio"]:checked + .radio-circle::before { 50 background-color: #ffffff; 51} 52 53.radio-button:nth-of-type(3) input[type="radio"]:checked + .radio-circle::before { 54 background-color: #26be00; 55} 56 57.radio-label { 58 font-size: 16px; 59 font-weight: bold; 60} 61 62.radio-button:hover .radio-circle { 63 border-color: #555; 64} 65 66.radio-button:hover input[type="radio"]:checked + .radio-circle::before { 67 background-color: #555; 68} 69
2.8K views
2.8K views
MIT License