<!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++中几个值得分析的小问题（2）

    下面有3个小问题,作为C++ Beginner你一定要知道错在哪里了. 1.派生类到基类的引用或指针转换一定“完美”存在? 一般情况,你很可能会认为:派生类对象的引用或指针转换为基类对象的引用或指针是 ...

  2. live555源码分析

    live555源代码下载(VC6工程):http://download.csdn.net/detail/leixiaohua1020/6374387 liveMedia 项目(http://www.l ...

  3. three.js入门系列之光和阴影

    初中物理教过我们镜面反射和漫反射,这是由于物体的材质直接导致的. 在three.js中,由于物体的材料不同,对于光源的反应也是不一样的,下面就让我们一探究竟. 一.材料 据Three.js中描述,有两 ...

  4. 深入理解Hystrix之文档翻译

    转载请标明出处: http://blog.csdn.net/forezp/article/details/75333088 本文出自方志朋的博客 什么是Hystrix 在分布式系统中,服务与服务之间依 ...

  5. html2canvas 截屏 兼容手机端

    <template> <div> <!--<input type="button" id="btnsavaImg" valu ...

  6. SAPUI5使用了哪些开源技术

    我们知道SAP UI5已经开源了,共享给了Apache开源组织后的名字叫Open UI5,虽然从API的长度上看,Open UI5比SAP UI5要短,但是两者的核心并没有多大区别,SAP UI5多了 ...

  7. python爬虫入门（4）-补充知识：XPath 教程(转自w3school)

    http://www.w3school.com.cn/xpath/index.asp 参考手册:http://www.w3school.com.cn/xpath/xpath_functions.asp ...

  8. crm--01

    需求: 将课程名称与班级综合起来 class ClassListConfig(ModelSatrk): # 自定义显示方式 def display_class(self,obj=None,is_hea ...

  9. margin top 无效

    常出现两种情况: (一)margin-top失效 两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果. 解决办法: 1.box2增加f ...

  10. 每天一个linux命令（文件操作）：【转载】find 命令的参数详解

    find一些常用参数的一些常用实例和一些具体用法及注意事项. 1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用.可以使用某种文件名模式来匹配文件 ...