#e8e8e8
1.radio-input input { 2 display: none; 3} 4 5.radio-input { 6 display: flex; 7 flex-direction: column; 8 padding: 12px; 9 background: #fff; 10 color: #000; 11 border-radius: 10px; 12 box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4); 13 width: 320px; 14} 15 16.info { 17 margin-bottom: 10px; 18 display: flex; 19 align-items: center; 20 justify-content: space-between; 21} 22 23.question { 24 color: rgb(49, 49, 49); 25 font-size: 1rem; 26 line-height: 1rem; 27 font-weight: 800; 28} 29 30.steps { 31 background-color: rgb(0, 0, 0); 32 padding: 4px; 33 color: #fff; 34 border-radius: 4px; 35 font-size: 12px; 36 line-height: 12px; 37 font-weight: 600; 38} 39 40.radio-input label { 41 display: flex; 42 background-color: #fff; 43 padding: 14px; 44 margin: 8px 0 0 0; 45 font-size: 13px; 46 font-weight: 600; 47 border-radius: 10px; 48 cursor: pointer; 49 border: 1px solid rgba(187, 187, 187, 0.164); 50 color: #000; 51 transition: .3s ease; 52} 53 54.radio-input label:hover { 55 background-color: rgba(24, 24, 24, 0.13); 56 border: 1px solid #bbb; 57} 58 59.result { 60 margin-top: 10px; 61 font-weight: 600; 62 font-size: 12px; 63 display: none; 64 transition: display .4s ease; 65} 66 67.result.success { 68 color: green; 69} 70 71.result.error { 72 color: red; 73} 74 75.radio-input input:checked + label { 76 border-color: red; 77 color: red; 78} 79 80.radio-input input[value="value-2"]:checked + label { 81 border-color: rgb(22, 245, 22); 82 color: rgb(16, 184, 16); 83} 84 85.radio-input:has(input[value="value-2"]:checked) .result.success { 86 display: flex; 87} 88 89.radio-input:has(input:not([value="value-2"]):checked ) .result.error { 90 display: flex; 91}
Variation of aradio
Variation of aradio