只用CSS修改radio的原点样式

    xiaoxiao2021-04-18  48

    需要两个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; }

    转载请注明原文地址: https://ju.6miu.com/read-674483.html

    最新回复(0)