<!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. PHP获取日期对应星期、一周日期、星期开始与结束日期的方法

    本文实例讲述了PHP获取日期对应星期.一周日期.星期开始与结束日期的方法.分享给大家供大家参考,具体如下: /* * 获取日期对应的星期 * 参数$date为输入的日期数据,格式如:2018-6-22 ...

  2. C++复制控制：拷贝构造函数

    一.拷贝构造函数是一种特殊构造函数,具有单个形参,该形参(常用const修饰)是对该类类型的引用.与默认构造函数一样 ,拷贝构造函数可由编译器隐式调用.拷贝构造函数应用的场合为: (1)根据另一个同类 ...

  3. Error:java: Compilation failed: internal java compiler error（转）

    set中java complier 设置的问题  ,项目中有人用jdk1.6  有人用jdk1.7  版本不一样  会一起这个错误 进行如下操作: 原文链接:http://blog.csdn.net/ ...

  4. Django中类视图使用装饰器的方式

    类视图使用装饰器 为类视图添加装饰器,可以使用两种方法. 为了理解方便,我们先来定义一个为函数视图准备的装饰器(在设计装饰器时基本都以函数视图作为考虑的被装饰对象),及一个要被装饰的类视图. def ...

  5. APUE学习笔记——6.10 时间与时间例程 time_t

           Unix提供的最基本的时间服务室日历时间(纪元时间),也就是计算1970年1月1日0时0分0秒到当前的秒数.该秒数用time_t表示. typedef long time_t; /* 时 ...

  6. 强化学习使用pygame模块的安装

    当你正想运行强化学习的游戏时,突然提示没有安装pygame模块怎么办呢? 其实很简单,通过下面的命令,就可以安装: D:\AI\sample\tensorforce>pip install py ...

  7. EasyPlayer RTSP Android安卓播放器修复播放画面卡在第一帧bug

    本文转自EasyDarwin团队成员John的博客:http://blog.csdn.net/jyt0551/article/details/75717097 最近发现某些手机在运行EasyPlaye ...

  8. tensorflow windows

    conda create -n py35 python=3.5 activate py35 pip install --ignore-installed --upgrade https://stora ...

  9. java List 学习

    要学习List<E>接口,首先,我知道它还有一个父接口Collection<E>.而Collection<E>又有一个超级接口Iterable<T>. ...

  10. Android 4.0 Camera架构分析之Camera初始化

    Android Camera 采用C/S架构,client 与server两个独立的线程之间使用Binder通信,这已经是众所周知的了.这里将介绍Camera从设备开机,到进入相机应用是如何完成初始化 ...