【css】css实现点击Toggle功能/icon切换
①实现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切换的更多相关文章
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- css禁用鼠标点击事件
css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...
- Python开发【第十篇】:CSS --无内容点击-不进去(一)
Python开发[第十篇]:CSS --无内容点击-不进去(一)
- 利用onekeyup即可实现验证码的点击刷新功能
显示验证码 首先在Home/Controller下创建一个公共控制器PublicController 1 <php2 namespace Home\Controller;3 4 use Thin ...
- Bulma CSS - CSS类
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...
- Python交互K线工具 K线核心功能+指标切换
Python交互K线工具 K线核心功能+指标切换 aiqtt团队量化研究,用vn.py回测和研究策略.基于vnpy开源代码,刚开始接触pyqt,开发界面还是很痛苦,找了很多案例参考,但并不能完全满足我 ...
- 如何用 CSS 创作一个立体滑动 toggle 交互控件
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视 ...
- 5.用 CSS 创作一个立体滑动 toggle 交互控件
原文地址:https://segmentfault.com/a/1190000014638655 HTML代码: <html> <head> <link rel=&quo ...
- 移动端优化 && 清除移动端网站点击a标签时闪现的边框或遮罩层(CSS) && 移动端点击 && 文字不可选择
在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为 ...
随机推荐
- PHP链接mysql 出现:由于目标计算机积极拒绝,无法连接
1.PHP链接mysql 出现:由于目标计算机积极拒绝,无法连接 2.原因是mysql服务没有启动,图标呈现红色 3.启动服务即可,打开cmd,输入net start mysql即可 4.启动后,图标 ...
- Windows win7下VMware Virtual Ethernet Adapter未识别网络解决方法
win7下VMware Virtual Ethernet Adapter未识别网络解决方法[摘] by:授客 QQ:1033553122 问题描述 win7系统下安装VMware,查看网卡适配器设置, ...
- Android MVP开发模式及Retrofit + RxJava封装
代码已上传到Github,因为接口都是模拟无法进行测试,明白大概的逻辑就行了! 欢迎浏览我的博客--https://pushy.site 1. MVP模式 1.1 介绍 如果熟悉MVP模式架构的话,对 ...
- maven 骨架命令行创建
项目的骨架maven 约定在项目的根目录下放置pom.xml,在src/main/java目录下放置主代码,在src/test/java下放置项目的测试代码. 这些基本的目录结构和pom.xml文件的 ...
- Pig distinct用法举例
dst = distinct data: DISTINCT只能对整个记录(整行)去重,不能在字段级别去重. 触发reduce阶段 data = load 'data'; distinct ...
- 11.Spring——JDBC框架
1.DBC 框架概述 2.Spring JDBC 示例 3.Spring 中 SQL 的存储过程 1.DBC 框架概述 在使用普通的 JDBC 数据库时,就会很麻烦的写不必要的代码来处理异常,打开和关 ...
- ASP.NET Web API 跨域访问(CORS)要注意的地方
一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...
- [翻译] GiFHUD
GiFHUD progress hud for displaying only animated gif images. no labels (for now) 状态指示器,仅仅用来显示gif图片,不 ...
- Linxu系统修改文件描述符
修改系统文件描述符 文件描述符:无符号整数(0-65535),进程使用它来标示打开的文件 /etc/security/limits.conf:可以修改CPU,堆栈, 1.查看最大的标示符 u ...
- Visual Studio 2013 Web开发新特性
微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...