自定义按钮样式

在一些网站上经常可以看到改造过的按钮选项比如这样

由于之前一直在B端企业，样式差不多就Ok了所以也没去研究。昨天刷百度前端学院的时候遇到一个题就是改造checkbox radio样式的，大概研究一番

最常见的自定义按钮样式，其实是用label模拟的,关于label可以在mdn进行查阅

label的for与表单的id对应，点击click对应的表单被激活
<label for="demo">click</label>
<input type="text" id="demo"/>

通过上面的例子知道了，只要label的for属性和表单的id对应，那么点击label就等于点击表单
这样我们可以通过把原本的input隐藏掉，改造label的样式就好了，来个最简单的实现

css
label {width: 16px;height: 16px;border:1px solid #d9d9d9;display:flex}
input {display: none}
.demo:checked+label {border: 1px solid red; font-weight: 700;}
.demo:checked+label::after {margin: auto;content: '';color: red;width: 8px;height: 8px;line-height: 8px;text-align: center;font-size: 12px;border-radius: 50%;background: red;}

html
<input type="radio" name="sex" id="radioBox" class="demo">
<label for="radioBox"></label>
<input type="radio" name="sex" id="radioBox1" class="demo">
<label for="radioBox1"></label>