用CSS模拟单选框

浏览器默认的一些表单样式不太好看，我们可以通过以下方法对它进行美化
以下是浏览器默认的样式：

经过CSS调试之后

首先可以用个简单的span标签（当然你也可以用其他标签）来模拟原生的单选框，大概原理就是，先使用label标签将原生单选框、用于模拟单选框的span标签以及文字包起来，并将原生单选框隐藏，然后再使用:checked伪类和+选择器来给span标签加选中样式。具体代码如下：

<div class="publicPrivate"><label><input type="radio" name="public_private" id="private" checked="checked" class="pp"><span></span>私有</label><label><input type="radio" name="public_private" id="public" class="pp"><span></span>公开</label></div>

CSS代码如下：

label{position: relative; padding:0px 60px0px 45px; cursor: pointer;}label input{ display: none;}label span{ position: absolute; left: 0; top: 0;bottom: 0; width: 22px; height: 22px; margin: auto; border: 1px solid #ccc;border-radius: 100%;}label span:after{ content: ''; position: absolute;top: 0; bottom: 0; left: 0; right: 0; width: 13px; height: 13px; margin: auto;border-radius: 100%; background:#24D38B;transform: scale(0); transition: all.3s;}label input:checked + span{border-color:#24D38B; background: #fff;}label input:checked +span:after{content:'';transform: scale(1);}