①实现Toggle功能

html结构:

<div class="cssTog">
<label>
<p> 专业:B020309现代企业管理(独立本科段)</p>
</label>
<input type="checkbox">
</div> css写法:
.cssTog{position:relative}
.cssTog input{position:absolute;top:0;left:0;width:100%;opacity: 0}
.cssTog input:active+.sub ,label input:focus+.sub{display: block;}
.cssTog input+.sub{display: none;}
js处理ios真实设备以上点击无效解决代码:document.body.addEventListener('touchstart', function () { });  //iOS移动设备:ac
②实现icon切换
另外,一般可input:checked用于点击切换icon图标 html结构: <label>
<input type="checkbox"/>
<i class="icon"></i>
记住密码
</label> label{position:relative}
label input{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;}
label .icon{width:16px;height:16px;display:inline-block;vertical-align:middle;background:red;}
label input:checked+.icon{background:green;}
 

①参考资料:http://blog.csdn.net/freshlover/article/details/43735273

【css】css实现点击Toggle功能/icon切换的更多相关文章

  1. amazeui学习笔记--css(常用组件6)--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  2. css禁用鼠标点击事件

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

  3. Python开发【第十篇】:CSS --无内容点击-不进去(一)

    Python开发[第十篇]:CSS  --无内容点击-不进去(一)

  4. 利用onekeyup即可实现验证码的点击刷新功能

    显示验证码 首先在Home/Controller下创建一个公共控制器PublicController 1 <php2 namespace Home\Controller;3 4 use Thin ...

  5. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  6. Python交互K线工具 K线核心功能+指标切换

    Python交互K线工具 K线核心功能+指标切换 aiqtt团队量化研究,用vn.py回测和研究策略.基于vnpy开源代码,刚开始接触pyqt,开发界面还是很痛苦,找了很多案例参考,但并不能完全满足我 ...

  7. 如何用 CSS 创作一个立体滑动 toggle 交互控件

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视 ...

  8. 5.用 CSS 创作一个立体滑动 toggle 交互控件

    原文地址:https://segmentfault.com/a/1190000014638655 HTML代码: <html> <head> <link rel=&quo ...

  9. 移动端优化 && 清除移动端网站点击a标签时闪现的边框或遮罩层(CSS) && 移动端点击 && 文字不可选择

      在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为 ...

随机推荐

  1. 使用手机预览移动端项目(Vue)

    1.在 npm run dev 启动Vue项目之后.例:http://localhost:8095/#/chatList 2.查看本机的 IP (WIN + R + cmd ) 输入 ipconfig ...

  2. opencv3.2.0实现视频抽帧,并保存成图片

    .实现指定帧数的抽取.和全部帧数的抽取,并保存到指定目录. 在QT新建一个控制台程序,程序源码如下:(程序实现每十帧获取一次帧) #include <QCoreApplication> # ...

  3. DNS隧道实战&&cobaltstrike利用dns隧道

    前言 使用 dns 隧道进行 tcp 通信. 正文 首先配置域名 配置一个 A 记录指向我们的 vps, 然后配置几个 ns 记录,指向刚刚设置的 A 记录 然后在服务端安装 wget https:/ ...

  4. new 关键字

    学习过的调用或者是执行函数的方式有几种? ①函数名+小括号 ②事件处理函数 ③定时器 ④数组里面的元素是函数,枚举出来执行 ⑤new关键字 提示:需要注意new 关键字需要在函数名前面使用 构造函数是 ...

  5. ReactJS表单handleChange

    handleInputChange = (event) => { const target = event.target; const type = target.type; const val ...

  6. git下配置github sshkey

    教程看这里 http://xiaxveliang.blog.163.com/blog/static/29708034201341244759225/

  7. Ssh 证书验证 续篇

    今天下午正好有外面的人要登录服务器,想了想,普通用户密码就是不想给,然后我就这样做了. useradd alex ---创建账户和密码 passwd alex mkdir /home/alex/.ss ...

  8. 【Oracle】存储过程写法小例子

    1.存储过程的基本语法: CREATE OR REPLACE PROCEDURE 存储过程名(param1 in type,param2 out type) IS 变量1 类型(值范围); 变量2 类 ...

  9. Script" References MACLEAN‘s post Speed ​​up the index creation.

    alter session set workarea_size_policy=MANUAL; alter session set db_file_multiblock_read_count=512; ...

  10. Linux下安装Tomcat7

    一.Tomcat7软件包下载 Tomcat下载地址http://tomcat.apache.org/download-70.cgi 下载完成后, 将软件包apache-tomcat-7.0.82.ta ...