input[type=radio]自定义样式

input为radio时，虽然会有默认选中的样式，但是并不符合大多数项目的需求，我们的目标是可以随心所欲自定义它的样式。怎么做呢？其实很简单，只要抓住3点。分别是1.label 2.隐藏自带样式 3.绘制我们的样式。

首先，我们准备了一个简单的选中样式，看图：

下面我们看看怎么实现

1.label

我们都知道，label可以和input关联，达到点击label就触发input的效果。

既然这样，我们就要充分的利用它。

<label for="cat" class="radio-box"><input type="radio" name="group" id="cat"><span class="radio-style">猫</span></label><label for="dog" class="radio-box"><input type="radio" name="group" id="dog"><span class="radio-style">狗</span></label>

看看这个简单的结构，label里面包了一个input和span,可以想象，我们的效果就是点击label触发input

我们看一下效果

2.隐藏自带样式

如何隐藏自带样式呢？方法很多，这里提供一种常用的写法

input[type="radio"] {opacity: 0;width: 0;height: 0;}

这样我们就看不到input自带的丑陋选择框了,再看一下效果，oh,yeah！消失了。

3.绘制自己的样式

利用span标签绘制自己的样式

.radio-style::before {display: inline-block;width: 18px;height: 18px;border-radius: 50%;border: 1px solid #d9d9d9;-webkit-box-sizing: border-box;box-sizing: border-box;content: "";}input[type="radio"]:checked + .radio-style::before {padding: 4px;background-color: blue;background-clip: content-box;border-color: blue;}

我们利用伪元素，给它绘制一个圆圈，然后在选中状态的时候，在改变它的样式，从而达到第一张图的效果。

以下是所有代码的地址，欢迎查看

input-radio

当然以上是最简单自定义样式，我们还可以把它绘制成按钮的形式，甚至是用图片代替它。虽然这样更加繁琐，但是万变不离其宗，只要掌握上面3点，你就可以随心所欲修改它的样式啦。