如何在bootstap中修改checkbox的样式
生活随笔
收集整理的這篇文章主要介紹了
如何在bootstap中修改checkbox的样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近搞bootstrap的時候發現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; }效果圖
點擊前
點擊后
自己寫的有點丑。。。不過樣式根據業務來改把，都是一個原理。
總結
以上是生活随笔為你收集整理的如何在bootstap中修改checkbox的样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么牌子的潜水泵耐用(分别是什么意思)
- 下一篇： jquery中如何实现一个li里面一排6