自定义 input[type=radio] 样式

input[type=radio] 原生的单选框样式和原生的复选框样式是一样的不美观，而通常设计过程中，为了契合产品风格，也会将这些组件样式设计的很漂亮，但是直接修改原生的样式，会发现只可以设置少数的样式，其余样式并没有效果。

因此，我们就需要自定义 radio 的个性化样式 ，来契合产品的漂亮风格了。

我这里简单的介绍两种CSS实现的方式：

两种方式都使用表单元素中的 label 元素和for属性进行关联，这样当鼠标点击 label 时，会自动选中单选框，这对用户体验更友好；

1、 使用伪类来实现自定义 radio 样式

html代码：

<p>css3改变 radio 默认样式</p>
<div class="checkbox01">
    <input type="radio" name="radios" id="checkboxLogin" />
    <label for="checkboxLogin">保持登录</label>
</div>
<div class="checkbox01">
    <input type="radio" name="radios" id="checkbox