通常情況下，各個瀏覽器對的樣式不一致，并且不那么美觀。所以有時候設計需要我們更換原有的樣式：

html：

<span><input type="checkbox" class="input_check" id="check3" value="123"><label for="check1"></label></span>

css:

span{position: relative;}.input_check {position: absolute;visibility: hidden;cursor:pointer;}.input_check+label {display: inline-block;width: 14px;height: 14px;border: 2px solid #677795;} .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;height: 4px; border: 2px solid #677795;border-top-color: transparent;border-right-color: transparent;-ms-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

---

其中必須注意，input的id必須和label的for一致，這是為了點擊label聯動點擊了此checkbox。：after實現的是對號的樣式，方框旋轉45度實現。

效果如下：

轉載于:https://www.cnblogs.com/gtlm/p/8177324.html

總結

以上是生活随笔為你收集整理的更换checkbox的原有样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。