<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>点击</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .box {

             position: relative;

             display: block;

             float: left;

             width: 50px;

             height: 50px;

             margin-top: 100px;

             margin-left: 100px;

             border: 1px solid #18c250;

             border-radius: 3px;

         }

         input[type=checkbox]:checked + label .box:before {

             content: "";

             position: absolute;

             top: 28px;

             left: 2px;

             width: 23px;

             height: 3px;

             background-color: #18c250;

             transform: rotate(45deg);

             -webkit-transform: rotate(45deg);

         }

         input[type=checkbox]:checked + label .box:after {

             content: "";

             position: absolute;

             top: 24px;

             left: 15px;

             width: 37px;

             height: 3px;

             background-color: #18c250;

             transform: rotate(-45deg);

             -webkit-transform: rotate(-45deg);

         }

         .info {

             float: left;

             margin-top: 92px;

             margin-left: 10px;

             font-size: 48px;

             user-select: none;

         }

         label {

             display: inline-block;

             max-width: 100%;

         }

         input[type=checkbox]{

             display: none;

         }

     </style>

 </head>

 <body>

 <input id="input" type="checkbox">

 <label for="input">

     <span class="box"></span>

     <span class="info">已阅读协议书</span>

 </label>

 </body>

 </html>

效果：

注意点：input要写在label前面，因为 + 选择器指的是兄弟元素中的弟弟元素，不包括哥哥元素。

写这个的初衷就在于那个亘古不变的道理，能用CSS解决的就不用js

在来个炫酷点的开关

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         body{

             background-color: #abcdef;

         }

         input{

             display: none;

         }

         .switch{

             position: relative;

             display: block;

             width: 38px;

             height: 20px;

             cursor: pointer;

             user-select: none;

             margin-top: 100px;

             margin-left: 100px;

             border-radius: 10px;

             background-color: #b0b0b0;

         }

         .switch:before{

             content: 'OFF';

             position: absolute;

             top: 1px;

             right: 2px;

             font-size: 12px;

             color: #fff;

             transform: scale(.75);

             -webkit-transform: scale(.75);

         }

         .switch:after{

             content: "";

             position: absolute;

             top: -1px;

             left: -6px;

             width: 22px;

             height: 22px;

             border-radius: 50%;

             background-color: #fff;

             -webkit-transition: left 200ms linear;

         }

         input[type=checkbox]:checked + label .switch{

             background-color: #18c250;

         }

         input[type=checkbox]:checked + label .switch:before{

             content: "ON";

             right: 15px;

         }

         input[type=checkbox]:checked + label .switch:after{

             left: 25px;

         }

     </style>

 </head>

 <body>

 <input id="input1" type="checkbox">

 <label for="input1">

     <a class="switch">

     </a>

 </label>

 <input id="input2" type="checkbox">

 <label for="input2">

     <a class="switch">

     </a>

 </label>

 </body>

 </html>

效果：

纯css实现点击事件的更多相关文章

  1. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  2. CSS实现点击事件及实践

    实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...

  3. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  4. css 禁止点击事件触发

    鼠标不可点击主要是两种表现: 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.禁止触发点击事件 pointer-events:none

  5. css处理事件透过、点击事件透过

    // 执行一些动作... $("#myModal2").css("pointer-events","none"); // 执行一些动作... ...

  6. css禁用鼠标点击事件

    css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...

  7. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  8. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  9. 纯css就能实现可点击切换的轮播图，feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

随机推荐

  1. C++STL内存配置的设计思想与关键源码分析

    说明:我认为要读懂STL中allocator部分的源码,并汲取它的思想,至少以下几点知识你要了解:operator new和operator delete.handler函数以及一点模板知识.否则,下 ...

  2. _routing字段介绍

    一个document通过以下公式被路由到该索引下一个特定的分片: shard_num = hash(_routing) % num_primary_shards _routing的默认值是文档的_id ...

  3. WEB-INF目录下的文件访问权限

    对于Tomcat服务器而言,WEB-INF是个特殊的目录.这个目录并不属于Web应用程序可以访问的上下文路径的一部分, 对于客户端来说,这个目录是不可见的,不能通过在浏览器中直接输入地址的方式来访问. ...

  4. c# http操作类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  5. losetup命令

    Linux losetup命令用于设置循环设备. 循环设备可把文件虚拟成区块设备,籍以模拟整个文件系统,让用户得以将其视为硬盘驱动器,光驱或软驱等设备,并挂入当作目录来使用. 语法 losetup [ ...

  6. Java跨平台的原理--java跨平台是通过JVM实现的

    孙鑫视频---笔记(1-3) java跨平台是通过JVM(java 虚拟机)实现的. Java应用程序的开发周期: 编译.下载.解释.执行. 1.java源文件的编译过程 java编译程序将java源 ...

  7. flowable EngineConfiguration的作用和继承关系（1）

    EngineConfiguration 是flowable引擎的核心部件. 在 flowable 中,实现引擎配置的顶层类是 AbstractEngineConfiguration 这是一个抽象类. ...

  8. ROS-I工业机器人培训课程资料 2017-06-30

    美国ROS工业联盟于2017年6月6日至8日在德克萨斯州圣安东尼奥市的SwRI举办了ROS工业开发人员培训班.12位与会者代表了一系列不同的组织,包括Bastian Solutions,EWI,Joh ...

  9. Echart--百度地图（散点图）

    参考:http://blog.csdn.net/xieweikun7/article/details/52766676 1.首先,下载嘛 Echarts http://echarts.baidu.co ...

  10. BZOJ3609 Heoi2014 人人尽说江南好【推理+结论】

    BZOJ3609 Heoi2014 人人尽说江南好 Description 小 Z 是一个不折不扣的 ZRP(Zealot Round-game Player,回合制游戏狂热玩家),最近他 想起了小时 ...