1. 程式人生 > >只用CSS修改radio的原點樣式

只用CSS修改radio的原點樣式

需要兩個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;
        }