CSS自定義多選框樣式的方法非常簡(jiǎn)單,只需要使用偽類和CSS屬性即可完成。首先,我們需要先將默認(rèn)的多選框隱藏掉:
input[type="checkbox"] { display: none; }
接著,我們使用偽類來為多選框添加樣式,比如添加選擇框、選中樣式等:
input[type="checkbox"] + label::before { content: ""; display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin-right: 10px; border: 1px solid #ccc; background: #fff; cursor: pointer; } input[type="checkbox"]:checked + label::before { background: #008000; }
以上代碼中,我們?yōu)槎噙x框的
最后,我們?yōu)?label>標(biāo)簽添加樣式,使其與選擇框?qū)R,并設(shè)置一個(gè)鼠標(biāo)指針來表示可點(diǎn)擊。
label { display: inline-block; vertical-align: middle; cursor: pointer; }
有了以上代碼,我們就可以為多選框自定義樣式了。如果需要改變樣式,可以根據(jù)需要修改以上CSS屬性。