自定义checkbox样式
生活随笔
收集整理的這篇文章主要介紹了
自定义checkbox样式
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
通過(guò)選中時(shí)添加背景圖片自定義CheckBox樣式
效果：
CSS樣式：
?
<style type="text/css>label {width: 10%;display: flex;display: -webkit-flex;display: -moz-flex;flex-direction: row;justify-content: center;align-items: center;}label input[type=checkbox] {width: 15px;height: 15px;overflow: hidden;background: #fff;appearance: none;-webkit-appearance: none;border: 1px solid #808080;outline: none;margin-right: 5px;margin-top: 0;}input[type=checkbox]:checked {appearance: none;-webkit-appearance: none;background-image: url(./Images/btn-blue_03.png);background-position: center;background-repeat: no-repeat;background-size: 100%;border-radius: 4px;border: 0;overflow: hidden;}</style>?
?
html結(jié)構(gòu)： <body><label><input type="checkbox" name="type" checked><span>one</span></label><label><input type="checkbox" name="type"><span>two</span></label> </body>
?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的自定义checkbox样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 自定义scoll样式
- 下一篇： HMTL label标签