input[type="radio"]自定义样式

Posted 2020-11-11 北辰狼月

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点，你就可以随心所欲修改它的样式啦。