css美化checkbox样式,置灰样式，超简洁
用户投稿 学习笔记 16阅读
css美化checkbox样式 效果图
样式可以自由定制，不用辛苦写一堆css
html <div><input type="checkbox" class="toggle"><span>复选框1<span></div><div><input type="checkbox" checked class="toggle"><span>复选框2<span></div><div><input type="checkbox" disabled class="toggle"><span>复选框3<span> </div><div><input type="checkbox" disabled checked class="toggle"><span>复选框4<span></div> css .toggle{ text-align: center; vertical-align: middle; border: none; appearance: none;/*关键代码*/ -webkit-appearance: none; outline: none; cursor: pointer;}.toggle::after{ content: url('../../../../assets/images/checkbox.png');}.toggle:checked::after{ content: url('../../../../assets/images/checkbox1.png');}.toggle:disabled{ content: url('../../../../assets/images/checkboxgray.png');}.toggle:checked:disabled{ content: url('../../../../assets/images/checkbox1gray.png');} 完整代码如下 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>美化checkbox</title><style type="text/css">body {font-family: '微软雅黑'; background:#eee} .box {width: 600px;border:1px solid #ccc; overflow: hidden; background: #fff; margin: 20px auto;padding: 10px;}.toggle{text-align: center;vertical-align: middle;border: none;appearance: none;/*关键代码*/-webkit-appearance: none;outline: none;cursor: pointer;}.toggle::after{content: url('./checkbox.png');}.toggle:checked::after{content: url('./checkbox1.png');}.toggle:disabled{content: url('./checkboxgray.png');}.toggle:checked:disabled{content: url('./checkbox1gray.png');}</style></head><body><div class="box"><div><input type="checkbox" class="toggle"><span>复选框1<span></div><div><input type="checkbox" checked class="toggle"><span>复选框2<span></div><div><input type="checkbox" disabled class="toggle"><span>复选框3<span> </div><div><input type="checkbox" disabled checked class="toggle"><span>复选框4<span></div></div></body></html> 其实核心就是找一张图片，遮住原来的checkbox框。还有加上appearance: none，这行代码。找UI或者自己PS一下就行。加油写代码哟标签：