433 views
CSSAdd prefixes
1.radio-input { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5} 6 7.radio-input input { 8 appearance: none; 9 width: 2em; 10 height: 2em; 11 background-color: #171717; 12 box-shadow: inset 2px 5px 10px rgb(5, 5, 5); 13 border-radius: 5px; 14 transition: .4s ease-in-out; 15} 16 17.radio-input input:hover { 18 scale: 1.2; 19 cursor: pointer; 20 box-shadow: none; 21} 22 23.radio-input .plus1 { 24 position: relative; 25 top: 0.01em; 26 left: -1.45em; 27 width: 1.3em; 28 height: 0.2em; 29 background-color: red; 30 rotate: 45deg; 31 scale: 0; 32 border-radius: 5px; 33 transition: .4s ease-in-out; 34} 35 36.radio-input .plus2 { 37 position: relative; 38 width: 1.3em; 39 height: 0.2em; 40 background-color: red; 41 transform: rotate(90deg); 42 border-radius: 5px; 43 transition: .4s ease-in-out; 44} 45 46.radio-input input:checked { 47 box-shadow: none; 48} 49 50.radio-input input:checked + .plus1 { 51 transform: rotate(180deg); 52 scale: 1; 53}
HTML
1<div class="radio-input"> 2 <input value="value-1" name="value-radio" id="value-1" type="radio"> 3 <div class="plus1"> 4 <div class="plus2"></div> 5 </div> 6 <input value="value-2" name="value-radio" id="value-2" type="radio" checked=""> 7 <div class="plus1"> 8 <div class="plus2"></div> 9 </div> 10 <input value="value-3" name="value-radio" id="value-3" type="radio"> 11 <div class="plus1"> 12 <div class="plus2"></div> 13 </div> 14</div>