改变radio默认样式

默认的，单选按钮radio类型的input元素会渲染成如下样式：

若想修改成如下风格的单选按钮:

那么，如何修改radio的默认样式呢？

html页面：

三步：

1）、隐藏type="radio"的input标签，隐藏方式有多种，这里采用：

2）、利用::before伪元素给label标签添加样式

3）、利用::before伪元素给选择的radio对应的label添加新样式

效果图：

总结：利用该技巧，也可实现radio里面放置图片等各种样式。