您的位置:首页 > Web前端 > CSS

只用CSS修改radio的原点样式

2017-04-14 14:43 387 查看
需要两个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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: