轉載https://www.cnblogs.com/cloud-k/p/8572438.html

修改之前的樣式

修改之後的樣式

html

<input type="checkbox" name="btn" id="btn1"><label for="btn1">按鈕1</label>


css樣式 

input[type="checkbox"]{ width:0.2rem; height:0.2rem; display:inline-block; text-align:center; vertical-align:middle; line-height:0.2rem; position:relative; }
input[type="checkbox"]::before{ content:""; position:absolute; top:0; left:0; background:#17202A; width:100%; height:100%; border:1pxsolid#d9d9d9 }
input[type="checkbox"]:checked::before{ content:"\2713"; background-color:#17202A; position:absolute; top:0; left:0; width:100%; border:1pxsolidrgb(133,137,141); color:rgb(255,255,255); font-size:0.2rem; font-weight:bold; }

“\2713”實體符號√