<!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. 海康威视 嵌入到web页面相关问题

    因项目上面需求,接触到了海康威视的设备,要把他嵌入到web页面中,所以就开始了爬坑之路 刚开始不知道如何把设备的页面嵌入到项目的web页面中,直到我遇见了他——“WEB3.0控件开发包V1.0.9_C ...

  2. MayBatis与Spring的整合

    1. 步骤 第一步:导入相关的jar包(spring和mybatis) mybatis-spring-*.jar spring-jdbc-*.jar spring-tx-*.jar 第二步:sprin ...

  3. 如何查看PHP的配置信息

    1.问题描述 如何利用PHP函数查看PHP的配置信息 2.问题函数 <?php echo phpinfo(); ?> 3.输出结果 phpinfo() PHP Version => ...

  4. OkHttp之BridgeInterceptor简单分析

    在< Okhttp源码简单解析(一) >这篇博客简单分析了Okhttp请求的执行流程,通过该篇博客我们知道OkHttp的核心网络请求中内置"拦截器"发挥了重大作用:本篇 ...

  5. php 路径问题

    今天迁移网站服务器时,路径出错: 解决办法: 在网站首页根目录 设置define 全局变量 ——根目录: 在涉及目录的地方,统统替换为 根目录:

  6. [Python]定时任务框架 APScheduler

    1.使用APScheduler教程 参考博客地址

  7. Asp.net MVC 实现JSONP

    JSONP可以帮我们解决跨域访问的问题.JSONP is JSON With Padding. 这里我们将不再解释其原理.我们来看在ASP.NET MVC 3 如何实现.首先我们需要定义一个Jsonp ...

  8. Could not load the "light_rain.png" image referenced from a nib in the bundle with identifier

    导入图片文件夹的时候勾选create groups

  9. ASP.NET WebForm 与 IE10、IE11

    最近维护公司一个烂项目.NET4.0 Asp.Net WebForm(在MVC5泛滥的今天还有用WebForm的(⊙o⊙)…) IE10.IE11下aspx中大表单提交不上去,报_DoPostBack ...

  10. bzoj 4447 小凸解密码

    bzoj 4447 小凸解密码 先将原始状态的 \(B\) 处理出来,可以发现,若不修改,则每次指定的起始位置不同,对这个环 \(B\) 带来的影响只有 \(B_0\) 不同,即每次 \(B_0=A_ ...