在一些網站上經常可以看到改造過的按鈕選項比如這樣
由於之前一直在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>