CSS3单选复选按钮美化样式
CSS3 的单选和复选按钮美化代码，蛮适合追求界面细节的你。基于Bootstrap 3.3.7，它给了你四种配色风格——蓝、绿、红、黄，样式统一，配色协调，调起来也方便。你只需要加个类似.btn-blue的类名到 HTML 标签上，颜色、选中态这些都自动搞定，挺省事的。
按钮的切换效果用到了:checked伪类，搭配:before和:after能加图标啥的，还带transition动画，选中时颜色平滑切换，手感挺顺的。比如：
.btn-blue:checked {
background-color: #007bff;
}
响应式方面，Bootstrap 自带的栅格系统就派上用场了。你写页面不用再手动调各种屏幕尺寸，直接走栅格就行。像是移动端的体验，也能做到不掉链子。
HTML 结构也不复杂，类似：
项目结构蛮清楚的，index.html里能看到实际效果，css目录下是所有样式代码，dist文件夹放的是编译好的资源，直接引用就行。如果你平时写后台系统、表单界面，或者在做数据配置类页面，拿来用真的合适。
想深入看看 CSS 过渡或者自定义控件的，也可以翻翻这些相关文章：
如果你也在折腾表单样式，不妨试试这套代码，样式灵活，集成也快。
文件大小：24.27KB
评论区