【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浏览器,其实这些特效无非就是为 ...
随机推荐
- vscode 代码跳转之PHP篇
1.安装插件:PHP IntelliSense 2.配置:"php.executablePath": "C:\\php\\php.exe", 但是目前有问题,跨 ...
- angular2.0---服务Service,使用服务进行数据处理
1.创建服务 打开命令窗口,cd到项目目录下,输入 ng g service myData1 回车 创建服务,如下图所示: 这样就成功创建了服务,此时,可以在项目的app文件夹下生成了两个serv ...
- .NET Core 微服务架构-Docker部署
本文主要介绍通过Docker来部署通过.NET Core开发的微服务架构,部署的微服务主要包括统一网关(使用Ocelot开发).统一认证(IdentityServer4).应用服务(ASP.NET C ...
- 如何调试flutter应用
The Dart Analyzer 这个工具帮助你分析代码,发现可能的错误. 运行命令行 终端进入flutter工程所在目录,执行flutter analyze 使用IntelliJ IDEA Dar ...
- CSS3 选择器用法小结
表单选择器: /*:enabled 可用的 :disabled 被禁用的 :focus 获取了焦点的 多用在表单元素上*/ input:enabled {...} input:disabled {.. ...
- java基础(九) 可变参数列表介绍
一.可变参数简介 在不确定参数的个数时,可以使用可变的参数列表. 1. 语法: 参数类型...(三个点) 例如: void printArray(Object...) 注意: 每个方法最多只有一个可变 ...
- 全局css,js缓存及更新版本策略
在当今web世界里,CDN对于加速页面加载速度,提高用户体验起了非常重要的作用.但是问题也带来了:作为开发人员,可能需要不定时的更新部分静态文件,比如对网页的重新设计会涉及到css文件的更新,这时怎么 ...
- 我是如何将linux用在开发环境中的
1.我为什么要写这篇文章 一直想深入学习一下linux的使用,于是将家里的笔记本装了linux系统,但是要将自己的系统打造一个适合开发的环境确实是一件费心费力的事,而且会经常出现一些莫名其妙的问题,以 ...
- Django之自定义权限
官方解释 Custom permissions¶ To create custom permissions for a given model object, use the permissions ...
- CompletionService和ExecutorCompletionService
CompletionService用于提交一组Callable任务,其take方法返回已完成的一个Callable任务对应的Future对象. 如果你向Executor提交了一个批处理任务,并且希 ...