只用CSS修改radio的原點樣式
阿新 • • 發佈:2019-01-27
需要兩個label,第一個label配合input,第2個label才是input的內容
HTML:
<input checked type="radio" id="radio-1" name="radio-1-set" class="regular-radio"/>
<label for="radio-1"></label>
<label class="inputlabel" for="radio-1">微信支付</label>
CSS:
.regular-radio { display: none; } .regular-radio + label { -webkit-appearance: none; background-color: RGB(248,248,249); padding: 9px; border-radius: 50px; /*padding: .09rem; border-radius: .5rem;*/ display: inline-block; position: relative; } .regular-radio:checked + label:after { content: ' '; width: 12px; height: 12px; border-radius: 50px; position: absolute; top: 3px; background: #E72F17; text-shadow: 0px; left: 3px; font-size: 32px; } .regular-radio:checked + label { background-color: #e9ecee; }