我们将使用纯 CSS 打造一些切换开关并使其拥有类似于 checkbox 的用户体验.
很多时候我们都需要用户通过勾选 / 取消 checkbox 来表明他们对一些问题的答案. 我们设置了一个标签, 一个 checkbox, 并在提交表单后获取 checkbox 值, 以查看用户是否已经选中或取消选中该 checkbox. 我们都知道默认的的 checkbox 长啥样, 而且还不能通过纯 CSS 的方式来设置 checkbox 的样式. 这种元素的样式由每个浏览器引擎单独管理 (每个浏览器下面 checkbox 的样式都可能不一样). 于是, 有一个更统一的界面岂不是会更好?
不要急! 一个小小的 CSS 技巧可以帮助我们解决这个问题. 通过将: checkded, :before 和: after 伪类结合到我们的 checkbox 上, 我们可以实现一些漂亮并拥有平滑过渡效果的切换型开关. 没有黑魔法... 仅仅是 CSS 的魅力. 下面让我们开始吧.
需要用到的 HTML 并不是我们之前没见过的, 也就是一个标准的 checkbox 结合一个 label. 我们用一个 div 将 checkox 和 label 包裹起来, 并给这个 div 添加了一个 switch 的样式类.
label 的样式则会使用 input + label 选择器来定位, 那样 label 就不需要自己的样式类名了. 现在让我们来看下下面的 HTML 结构:
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
- <div class="switch">
- <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
- <label for="cmn-toggle-1"></label>
- </div>
- <div class="switch">
- <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
- <label for="cmn-toggle-4"></label>
- </div>
- <div class="switch">
- <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
- <label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
- </div>
这里没什么特别的. 对于 CSS, 我们希望真实的 checkbox 被隐藏在屏幕和视线之外. 基本上所有的样式都被加在 label 上. 这样做很方便, 因为点击 label 实际上会勾选 / 取消勾选 checkbox. 我们将用下面的 CSS 来实现切换开关:
- .cmn-toggle {
- position: absolute;
- margin-left: -9999px;
- visibility: hidden;
- }
- .cmn-toggle + label {
- display: block;
- position: relative;
- cursor: pointer;
- outline: none;
- user-select: none;
- }
样式一
此时 label 充当容器的角色, 并拥有宽和高. 我们还给它设置了一个背景颜色来模拟我们的切换开关的边界.:before 元素模拟开关内部的浅灰色区域 (开关打开时背景颜色会过渡到绿色).:after 元素才是真正的圆形开关, 它的层级高于一切, 在点击时的时候它将从左滑动到右. 我们将给: after 元素添加一个 box-shadow 使它看起来更加立体. 当 input 接受: checked 伪类时, 我们将平滑的改变: before 元素的背景颜色和: after 元素的位置. CSS 如下:
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
- input.cmn-toggle-round + label {
- padding: 2px;
- width: 120px;
- height: 60px;
- background-color: #dddddd;
- border-radius: 60px;
- }
- input.cmn-toggle-round + label:before,
- input.cmn-toggle-round + label:after {
- display: block;
- position: absolute;
- top: 1px;
- left: 1px;
- bottom: 1px;
- content: "";
- }
- input.cmn-toggle-round + label:before {
- right: 1px;
- background-color: #f1f1f1;
- border-radius: 60px;
- transition: background 0.4s;
- }
- input.cmn-toggle-round + label:after {
- width: 58px;
- background-color: #fff;
- border-radius: 100%;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
- transition: margin 0.4s;
- }
- input.cmn-toggle-round:checked + label:before {
- background-color: #8ce196;
- }
- input.cmn-toggle-round:checked + label:after {
- margin-left: 60px;
- }
样式二
接下来的这个例子和上面的例子非常相似, 主要的区别在于它的外观表现. 它符合现代网站平滑扁平化趋势, 但是就功能而言和例 1 一样. 下面的 CSS 仅仅改变了 toggle 的表现风格, 其他的都是一样的.
- input.cmn-toggle-round-flat + label {
- padding: 2px;
- width: 120px;
- height: 60px;
- background-color: #dddddd;
- border-radius: 60px;
- transition: background 0.4s;
- }
- input.cmn-toggle-round-flat + label:before,
- input.cmn-toggle-round-flat + label:after {
- display: block;
- position: absolute;
- content: "";
- }
- input.cmn-toggle-round-flat + label:before {
- top: 2px;
- left: 2px;
- bottom: 2px;
- right: 2px;
- background-color: #fff;
- border-radius: 60px;
- transition: background 0.4s;
- }
- input.cmn-toggle-round-flat + label:after {
- top: 4px;
- left: 4px;
- bottom: 4px;
- width: 52px;
- background-color: #dddddd;
- border-radius: 52px;
- transition: margin 0.4s, background 0.4s;
- }
- input.cmn-toggle-round-flat:checked + label {
- background-color: #8ce196;
- }
- input.cmn-toggle-round-flat:checked + label:after {
- margin-left: 60px;
- background-color: #8ce196;
- }
样式三
现在, 我们要做一点不一样的事了. 我们将会创建一个翻转风格的 switcher 开关. 默认视图为灰色, 并显示 "No"(或任何表示未选中的内容), 勾选后的视图则为绿色, 并显示 "Yes". 当点击 label 时, swithcer 会沿 Y 轴翻转 180 度. 我们将使用 "data-attributes" 来填充未选中 / 已选中时内容. 这些 "data-attributes" 在 HTML 中由 "data-on" 和 "data-off" 指定, 他们将分别填充到: after 和: before 两个伪元素中. 请注意: after 伪元素中的 backface-visiibility 属性, 由于起点是 - 180 度, 通过这个属性可以隐藏背面的内容.
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
- input.cmn-toggle-yes-no + label {
- padding: 2px;
- width: 120px;
- height: 60px;
- }
- input.cmn-toggle-yes-no + label:before,
- input.cmn-toggle-yes-no + label:after {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- color: #fff;
- font-family: "Roboto Slab", serif;
- font-size: 20px;
- text-align: center;
- line-height: 60px;
- }
- input.cmn-toggle-yes-no + label:before {
- background-color: #dddddd;
- content: attr(data-off);
- transition: transform 0.5s;
- backface-visibility: hidden;
- }
- input.cmn-toggle-yes-no + label:after {
- background-color: #8ce196;
- content: attr(data-on);
- transition: transform 0.5s;
- transform: rotateY(180deg);
- backface-visibility: hidden;
- }
- input.cmn-toggle-yes-no:checked + label:before {
- transform: rotateY(180deg);
- }
- input.cmn-toggle-yes-no:checked + label:after {
- transform: rotateY(0);
- }
浏览器兼容性
上面的这些在浏览器兼容方面的要求是, IE8 及以下的浏览器不能识别: checked 伪类, 因此你需要检测浏览器, 如果是老旧的 IE, 则直接回退到原始的 checkbox,CSS transitions 属性不支持 IE9 及以下浏览器, 但这仅仅会影响切换过程中的过渡部分, 除此之外没有其他毛病能够正常工作.
总结
这是一个关于一些很好的 CSS 切换开关示例! 这种技术使得一切完全复合语义, 不会增加任何疯狂的标记, 并且用纯 CSS 就可以完成. 当然, 你需要注意浏览器兼容性情况, 但是你可以使用条件样式来兼容旧版浏览器, 使用上面提到的例子, 并不会产生什么不足之处.
来源: http://www.jianshu.com/p/46a7a0a2f91f