最近搞bootstrap的時候發(fā)現(xiàn)checkbox這個東西有點丑，改了一下。上代碼

html代碼

<input type="checkbox" class="checkAll"/>

css代碼

input[type="checkbox"]:hover, input[type="checkbox"]:focus {outline: none; } .checkAll {width: 28px;height: 28px;appearance: none;position: relative; } .checkAll:before {content: "";width: 28px;height: 28px;background: #FFFFFF;display: inline-block;vertical-align: middle; } .checkAll:after {content: "";width: 24px;height: 24px;background: #FFFFFF;border:2px solid black;display: block;position: absolute;top: 2px;left: 2px; } .checkAll:checked::before {content: "";width: 28px;height: 28px;border:2px solid black;display: inline-block;vertical-align: middle; } .checkAll:checked::after {content: "";width: 20px;height: 20px;text-align: center;background:black;display: block;position: absolute;top: 4px;left: 4px; }

效果圖
點擊前

點擊后

自己寫的有點丑。。。不過樣式根據(jù)業(yè)務(wù)來改把，都是一個原理。

總結(jié)

以上是生活随笔為你收集整理的如何在bootstap中修改checkbox的样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。