用label標簽模擬checkbox選擇框，貼出關鍵代碼如下：（具體樣式還需自己調整一下）
我的效果·：
多個選項框設定一樣，改變下input輸入框的calss名與label名即可，
HTML代碼： <div class="hander"> <input type="checkbox" name="favorite" value="1" id="color-input-red" class="color-input-red"/> <label for="color-input-red"></label> <span>手袋</span> </div>
CSS代碼： #color-input-red +label{ display: block; width:0.22rem; height:0.22rem; cursor: pointer; position: absolute; top: 0.09rem; left: 0; border: 1px solid #cccccc; } #color-input-red:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size:0.16rem; line-height: 0.20rem; color: #000000; }
//隱藏checkbox默認樣式 input[type=checkbox]{ visibility: hidden; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/65694.html
標籤：Html/Css