自定義按鈕樣式

在一些網站上常常能夠看到改造過的按鈕選項好比這樣

因爲以前一直在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>