<!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. 【PL/SQL编程】数据类型说明

    1. 数值类型 数值类型主要包括NUMBER.PLS_INTEGER.和BINARY_INTEGER 3种基本类型.NUMBER可以用来存储整数或浮点数,PLS_INTEGER和BINARY_INTE ...

  2. Eclipse上安装springsource-tool-suite

    spring tool suite 是一个基于eclipseIDE开发环境中的用于开发spring应用程序的工具.提供了开箱即用的环境用于实现,调试和部署你的spring应用,包括为关键的的服务器和云 ...

  3. 我也说说Emacs吧(3) - 文件基本操作

    Spacemacs文件基本操作 有了前两讲的积累,我们知道了: 1. 我们既要学习emacs的操作,也要学习vi的操作 2. emacs是一个可扩展的平台,我们并不是从头配置,而是使用一套成熟的集成方 ...

  4. iOS runloop 自定义输入源

    创建自定义输入源需要定义以下内容 1)输入源要处理的信息 2)使感兴趣的客户端知道如何和输入源交互的调度例程 3)处理其他任何客户发送请求的例程 4)使输入源失效的取消例程 上图的处理流程:主线程(M ...

  5. idea和pycharm激活方法

    idea和pycharm是jetbrains出品的很火的开发辅助工具,不过目前来说是收费的,对于囊中羞涩的同学来说还是比较困难的 我写这篇博客只是为了方便新手使用,推进开发进程,但希望大家在合适的情况 ...

  6. 【剑指offer】左旋转字符串，C+实现

    原创博文,转载请注明出处! 本题牛客网地址 本题代码的github地址 本系列文章的索引地址 # 题目 # 思路 先局部翻转,后整体翻转.举例:abcdefg先局部翻转为bagfedc,后整体翻转为c ...

  7. 程序设计入门-C语言基础知识-翁恺-第一周：简单的计算程序-详细笔记（一）

    目录 第一周:简单的计算程序 1.1 第一个程序 Hello World! 1.2 变量 1.3 计算 1.4 编程作业及课后讨论 第一周:简单的计算程序 1.1 第一个程序 Hello World! ...

  8. daemon Thread

    1.概念 守护进程(daemon)是指在UNIX或其他多任务操作系统中在后台执行的电脑程序,并不会接受电脑用户的直接操控.此类程序会被以进程的形式初始化.守护进程程序的名称通常以字母“d”结尾:例如, ...

  9. shell编程--遍历目录下的文件

    假定目录text下有如下文件      目录:dir_1.dir_2.dir_3 文件:text_1.text_2 遍历目录下所有的文件是目录还是文件 if -- if类型: #!bin/sh for ...

  10. BZOJ1131 POI2008 Sta 【树形DP】

    BZOJ1131 POI2008 Sta Description 给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大 Input 给出一个数字N,代表有N个点.N<=10 ...