528 views
CSSAdd prefixes
1.radio-inputs { 2 position: relative; 3 display: flex; 4 flex-wrap: wrap; 5 border-radius: 0.5rem; 6 background-color: #EEE; 7 box-sizing: border-box; 8 box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06); 9 padding: 0.25rem; 10 width: 300px; 11 font-size: 14px; 12} 13 14.radio-inputs .radio { 15 flex: 1 1 auto; 16 text-align: center; 17} 18 19.radio-inputs .radio input { 20 display: none; 21} 22 23.radio-inputs .radio .name { 24 display: flex; 25 cursor: pointer; 26 align-items: center; 27 justify-content: center; 28 border-radius: 0.5rem; 29 border: none; 30 padding: .5rem 0; 31 color: rgba(51, 65, 85, 1); 32 transition: all .15s ease-in-out; 33} 34 35.radio-inputs .radio input:checked + .name { 36 background-color: #fff; 37 font-weight: 600; 38}
HTML
1<div class="radio-inputs"> 2 <label class="radio"> 3 <input type="radio" name="radio" checked=""> 4 <span class="name">HTML</span> 5 </label> 6 <label class="radio"> 7 <input type="radio" name="radio"> 8 <span class="name">React</span> 9 </label> 10 11 <label class="radio"> 12 <input type="radio" name="radio"> 13 <span class="name">Vue</span> 14 </label> 15</div>