Radio by coding-masala
#e8e8e8
1* { 2 box-sizing: border-box; 3 margin: 0; 4 padding: 0; 5} 6 7body { 8 font-family: Arial, sans-serif; 9 background-color: #f1f1f1; 10 padding: 20px; 11} 12 13.radio-group { 14 display: flex; 15 flex-direction: column; 16} 17 18.radio-label { 19 display: flex; 20 align-items: center; 21 padding: 0.5em; 22 margin-bottom: 0.5em; 23 background-color: #fff; 24 border: 1px solid #ccc; 25 border-radius: 4px; 26 transition: background-color 0.2s, border-color 0.2s; 27} 28 29.radio-label:hover { 30 background-color: #e6e6e6; 31} 32 33.radio-input { 34 position: absolute; 35 opacity: 0; 36} 37 38.radio-input:checked + .radio-label { 39 background-color: #ffc3c3; 40 border-color: #ff1111; 41} 42 43.radio-input:focus + .radio-label { 44 outline: 2px solid #ff1111; 45} 46 47.radio-inner-circle { 48 display: inline-block; 49 width: 1em; 50 height: 1em; 51 border: 2px solid #888; 52 border-radius: 50%; 53 margin-right: 0.5em; 54 transition: border-color 0.2s; 55 position: relative; 56} 57 58.radio-label:hover .radio-inner-circle { 59 border-color: #555; 60} 61 62.radio-input:checked + .radio-label .radio-inner-circle { 63 border-color: #ff1111; 64} 65 66.radio-input:checked + .radio-label .radio-inner-circle::after { 67 content: ''; 68 display: block; 69 width: 0.5em; 70 height: 0.5em; 71 background-color: #ff1111; 72 border-radius: 50%; 73 position: absolute; 74 top: 50%; 75 left: 50%; 76 transform: translate(-50%, -50%); 77} 78
1.8K views
1.8K views
Variations
1 MIT License