CSS开关按钮样式新手入门_按钮基础入门

我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签,一个checkbox,并在提交表单后获取checkbox值,以查看用户是否已经选中或取消选中该checkbox。我们都知道默认的的checkbox长啥样,而且还不能通过纯CSS的方式

CSS开关按钮样式新手入门

我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。

CSS开关按钮样式新手入门_按钮基础入门

很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签,一个checkbox,并在提交表单后获取checkbox值,以查看用户是否已经选中或取消选中该checkbox。我们都知道默认的的checkbox长啥样,而且还不能通过纯CSS的方式来设置checkbox的样式。这种元素的样式由每个浏览器引擎单独管理(每个浏览器下面checkbox的样式都可能不一样)。于是,有一个更统一的界面岂不是会更好?

不要急!一个小小的CSS技巧可以帮助我们解决这个问题。通过将:checkded, :before和:after伪类结合到我们的checkbox上,我们可以实现一些漂亮并拥有平滑过渡效果的切换型开关。没有黑魔法…仅仅是CSS的魅力。下面让我们开始吧。

HTML

需要用到的HTML并不是我们之前没见过的,也就是一个标准的checkbox结合一个label。我们用一个div将checkox和label包裹起来,并给这个div添加了一个switch的样式类。

label的样式则会使用input + label选择器来定位,那样label就不需要自己的样式类名了。现在让我们来看下下面的HTML结构:

<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;
}

样式一

CSS开关按钮样式新手入门_按钮基础入门

此时label充当容器的角色,并拥有宽和高。我们还给它设置了一个背景颜色来模拟我们的切换开关的边界。:before元素模拟开关内部的浅灰色区域(开关打开时背景颜色会过渡到绿色)。:after元素才是真正的圆形开关,它的层级高于一切,在点击时的时候它将从左滑动到右。我们将给:after元素添加一个box-shadow使它看起来更加立体。当input接受:checked伪类时,我们将平滑的改变:before元素的背景颜色和:after元素的位置。CSS如下:

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;
}

样式二

CSS开关按钮样式新手入门_按钮基础入门

接下来的这个例子和上面的例子非常相似,主要的区别在于它的外观表现。它符合现代网站平滑扁平化趋势,但是就功能而言和例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;
}

样式三

CSS开关按钮样式新手入门_按钮基础入门

现在,我们要做一点不一样的事了。我们将会创建一个翻转风格的switcher开关。默认视图为灰色,并显示“No”(或任何表示未选中的内容),勾选后的视图则为绿色,并显示“Yes”。当点击label时,swithcer会沿Y轴翻转180度。我们将使用“data-attributes”来填充未选中/已选中时内容。这些“data-attributes”在HTML中由“data-on”和“data-off”指定,他们将分别填充到:after和:before两个伪元素中。请注意:after伪元素中的backface-visiibility属性,由于起点是-180度,通过这个属性可以隐藏背面的内容。

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就可以完成。当然,你需要注意浏览器兼容性情况,但是你可以使用条件样式来兼容旧版浏览器,使用上面提到的例子,并不会产生什么不足之处。

海计划公众号
(0)
上一篇 2020/03/30 07:15
下一篇 2020/03/30 07:15

您可能感兴趣的内容

  • 用JavaScript带你体验V8引擎解析标识符零基础入门_引擎菜鸟教程

    先上知识点,标识符的扫描分为快解析和慢解析,一旦出现Ascii编码大于128的字符或者转义字符,会进入慢解析,略微影响性能,所以最好不要用中文、特殊字符来做变量名(不过现在代码压缩后基本不会有这种情况了)。每一位JavaScript的初学者在学习声明一个变量时,都会遇到标识符这个概念,简单来讲标识符的定义如下。第一个字符,可以是任意Unicode字母(包括英

    2020/03/29
  • Vue实现生成二维码并且能下载到本地使用帮助vue-qr的使用_二维码使用说明

    vue-qr先说一下特点:带可以设置logo图片、背景图片、背景颜色、尺寸、边距等。1、vue-qr的安装:npm install vue-qr –save2、在你要生成二维码的组件里面 import VueQr from ‘vue-qr’3、在export default里面注册组件components:{VueQr
    }4、在template里使用<vu

    2020/04/03
  • plotly.js指南攻略_基于d3.js 和stack.gl开源的 JavaScript 图表库

    plotly.js入门基础知识 官方网址:https://plot.ly/javascript/ GitHub:https://github.com/plotly/plotly.j…

    2020/03/06
  • Js如何获取某一天所在的星期?菜鸟教程_日期入门教程

    我们会遇到的需求的是,获取今天或者某一天所在星期的开始和结束日期。我们这里来获取今天所在星期的始末日期,我们可以通过(new Date).getDay()来获取今天是星期几,然后再通过这个减去或者加上一定的天数,就是这个星期的开始日期和结束日期。function getWeekStartAndEnd() {const oneDayTime = 1000 *

    2020/03/24
  • 3种web会话管理的方式菜鸟教程_会话小白攻略

    http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的。当然它知道是哪个客户端地址发过来的,但是对于我们的应用来说,我们是靠用户来管理,而不是靠客户端。所以对我们的应用而言,它是需要有状态管理的,以便服务端能够准确的知道http请求是哪个用户发起的,从而判断他是否有权限继续这个请求。这个过程就是常说的会话管理。

    2020/03/29
  • 做前端程序员需要会什么,企业的招聘需求是如何?使用帮助_招聘使用帮助

    几乎所有的公司在面试Web前端人员时,准备的技术面试题,都基本上是由三个方面的试题组成,这三个方面的试题分别是:基础试题、JavaScript原生试题和新技术试题。下面说说为什么一份面试题会由这几个方面的内容组成。1、基础试题基础试题,对于Web前端来说,那就是HTML3、Css3、JavaScript,有的公司还要问一些移动前端的技能。对于这部分的技能,试

    2020/03/24
  • 关键词的优化怎么调整才能让网站排名靠前菜鸟教程下载_seo新手入门

    网站的关键词优化是一个漫长的工作,而且需要企业的人员经常分析关键词。而有的企业在短期没看到效果就不继续优化,导致网站的关键词没靠前的排名,网站的关键词是需要优化很长时间,大概需要一个月到三个月才能看到网站关键词排名的变化。那么,关键词的优化怎么调整才能让网站排名靠前?大家怎样进行网站关键词优化才能够让排名靠前呢?,以下内容就来为大家简单的分析一下怎么做好关键

    2020/03/23
  • CSS Module基础入门_模块小白指南

    CSS Module产生背景在软件工程里面模块指的是可组合、分解和更换的单元。下面是一张css树,项目里面总的css文件是由一系列小的单元组成,比如下面的reset.css就是一个单元。模块化的概念不光在css里面,在JS里面也是同样适用的,我们把代码按照一定的规则和逻辑拆分,分解成可组合可更换的单元,这样就实现了一个最大限度的代码复用。在css中,代码复用

    2020/03/29
  • 将本地启动一个HTTP服务器,映射到外网环境使用指南_服务器新手入门

    将本有时候,我们想要测试一下打包好的项目,但是直接点开index.html文件不管用,因为依赖的路径不正确,这时候就需要启动一个HTTP服务来打开项目。我们可以使用 http-server 或者 web server for chrome 来解决这个问题。
    有时候,我们还想要外网也能访问我们本地的服务,这时候我们可以使用 ngrok 来解决这个问题。一、如何

    2020/04/05
  • Gifntext新手入门_在线免费GIF动图编辑器

    Gifntext新手入门 官方网址:http://www.gifntext.com/ 简介描述:在线免费GIF动图编辑器 「Gifntext」是一款在线免费的GIF图片编辑器工具,…

    2020/03/11
  • HTML的<Object>标签怎么用?入门基础_标签基础教程

    HTML的<Object>标签怎么用?入门基础 <object>标签是一个HTML标签,用于在网页中显示音频,视频,图像,PDF和Flash等多媒体;它通常…

    2020/03/20
  • HTTPS 如何保证数据传输的安全性入门基础知识_http教程视频

    大家都知道,在客户端与服务器数据传输的过程中,HTTP协议的传输是不安全的,也就是一般情况下HTTP是明文传输的。但HTTPS协议的数据传输是安全的,也就是说HTTPS数据的传输是经过加密的。在客户端与服务器这两个完全没有见过面的陌生人交流中,HTTPS是如何保证数据传输的安全性的呢?下面我将带大家一步步了解HTTPS是如何加密才得以保证数据传输的安全性的。

    2020/04/03
  • 解决微信返回上一页.页面不刷新问题菜鸟教程网_微信菜鸟教程

    在项目中遇到的一个神奇的 BUG,点击「返回」按钮返回到上一页,但是页面却没有刷新。这是 ios 微信的缓存机制造成的,跳转到下一页时仍然会缓存当前页。解决方法:window.onpageshow = function (event) {if (event.persisted) {window.location.reload()}
    }onload 事件在页面

    2020/03/30
  • tui.chart攻略教程_漂亮的数据可视化图表

    tui.chart攻略教程 官方网址:http://ui.toast.com/tui-chart/ GitHub:https://github.com/nhn/tui.chart …

    2020/03/06
  • 微信h5页面下拉露出网页来源的解决办法入门指南_微信入门教程

    微信h5页面下拉露出网页来源的解决办法入门指南 微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉 //禁止页面拖动 document.add…

    2020/03/19
  • 用React hooks实现TDD基础入门_hooks菜鸟教程

    用React hooks实现TDD基础入门 由于篇幅所限文章中并没有给出demo的所有代码,大家如果有兴趣可以将代码clone到本地从commit来看整个demo的TDD过程,配合…

    2020/03/20