你见过吗？9款超炫的复选框（Checkbox）效果复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框（Checkbox）效果，纯 CSS3 实现，未使用任何图片。
温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
前面三款效果都是灵感来自移动应用程序的滑动选择框效果，在选择和未选择状态之间通过滑动来切换效果，非常的动感。效果的实现方面是借用了一个 DIV 标签和一个 Label 标签，下面是效果一的 HTML代码示例：
<section title=".slideOne"> <div class="slideOne"> <input type="checkbox" value="None" id="slideOne" name="check" checked /> <label for="slideOne"></label> </div> </section>
为了实现圆角和复选框的立体感效果，这里运用了 CSS3 的圆角（border-radius）、盒阴影（box-shadow）、渐变（linear-gradient）以及 CSS3 动画技术。下面是效果一的 CSS 代码示例：
.slideOne { width: 50px; height: 10px; background: #333; margin: 20px auto; position: relative; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);}.slideOne label { display: block; width: 16px; height: 16px; position: absolute; top: -3px; left: -3px; cursor: pointer; background: #fcfff4; background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}.slideOne input[type=checkbox] { visibility: hidden;}.slideOne input[type=checkbox]:checked + label { left: 37px;}
后面六款效果的交互是我们常见的，使用 CSS3 对浏览器默认的复选框效果进行了美化，并且在各个浏览器中表现一致。HTML 代码都是类似的，这里例举效果五的代码：
<section title=".roundedTwo"> <!-- .roundedTwo --> <div class="roundedTwo"> <input type="checkbox" value="None" id="roundedTwo" name="check" checked /> <label for="roundedTwo"></label> </div> <!-- end .roundedTwo --></section>
CSS 代码如下：
.roundedTwo label { width: 20px; height: 20px; position: absolute; top: 4px; left: 4px; cursor: pointer; background: -moz-linear-gradient(top, #222222 0%, #45484d 100%); background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%); background: linear-gradient(to bottom, #222222 0%, #45484d 100%); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;}.roundedTwo label:after { content: ''; width: 9px; height: 5px; position: absolute; top: 5px; left: 4px; border: 3px solid #fcfff4; border-top: none; border-right: none; background: transparent; filter: PRogid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}.roundedTwo label:hover::after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3;}.roundedTwo input[type=checkbox] { visibility: hidden;}.roundedTwo input[type=checkbox]:checked + label:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1;}
源码下载 在线演示
您可能感兴趣的相关文章期待已久的2013年度最佳 jQuery 插件揭晓赞！史上最全的浏览器 CSS & JS Hack 手册10大流行的 Metro UI 风格 Bootstrap 主题推荐35款精致的 CSS3 和 HTML5 网页模板精选12款优秀 jQuery Ajax 分页插件和教程
本文链接：你见过吗？9款超炫的复选框（Checkbox）效果
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源