bootstrap中如何使input中的小图标获得点击事件
bootstrap中,放入input中的小图标是不能点击的。
在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见。
要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层加点击事件。
代码如下:
html: <span class="cover"></span>
css:
显示效果:
最后将border去掉即可,就可以给透明层加点击事件以达到想要的效果。
bootstrap中,放入input中的小图标是不能点击的。
在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见。
要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层加点击事件。
代码如下:
html: <span class="cover"></span>
css:
显示效果:
最后将border去掉即可,就可以给透明层加点击事件以达到想要的效果。
bootstrap中如何使input中的小图标获得点击事件的更多相关文章
- 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件
		
一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...
 - css使input中的值自动变大写
		
<style type="text/css"> input { text-transform:uppercase; } </style>
 - 【转】去掉HTML5中number类型input字段的小箭头
		
第一种方案: 在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appea ...
 - vue中ref在input中详解
		
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...
 - C#中要使ListBox使用AddRange()时,能够触发SelectedValueChanged事件
		
1. 要触发 SelectedValueChanged事件,必须要当ListBox所选中的值发生改变 基本思路是: 当AddRange()后,就马上指定ListBox的SelectedIndex,这样 ...
 - IOS 中关于自定义Cell 上的按钮 开关等点击事件的实现方法(代理)
		
1.在自定义的Cell .h文件中写出代理,写出代理方法. @protocol selectButtonDelegate <NSObject> -(void)selectModelID:( ...
 - 在input内添加小图标或文字(元/月)等
		
文字: <td class="formValue"> <div class="input-group"> <input id=&q ...
 - 利用overflow实现导航栏中常 出现的倒三角下拉小图标
		
常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...
 - vue中解决拖动和点击事件的冲突
		
BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...
 
随机推荐
- Hg(Mercurial)版本管理学习
			
1.关闭分支,首先切到你要关闭的分支 hg commit --close-branch -m. 2.仓库ip地址改变之后,重设仓库ip 找到.hg文件夹 - hgrc文件 - 记事本打开重设 3.推分 ...
 - 深入讲解Android Property机制
			
深入讲解Android Property机制 侯亮 1 概述 Android系统(本文以Android 4.4为准)的属性(Property)机制有点儿类似Windows系统的注册表,其中的 ...
 - angular学习笔记(十四)-$watch(2)
			
下面来看一个$watch的比较复杂的例子: 还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子, 给它添加一个计算总价和折扣的 ...
 - scrollTop兼容封装
			
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
 - Hadoop集群datanode死掉或者secondarynamenode进程消失处理办法
			
当Hadoop集群的某单个节点出现问题时,一般不必重启整个系统,只须重启这个节点,它会自动连入整个集群. 在坏死的节点上输入如下命令即可: hadoop-daemon.sh start datanod ...
 - java web 自定义的权限框架
			
权限框架2部分 1.认证 (通常指登录) 2.授权 (指用户访问改页面是否有权限) 设计:
 - C#中一道关于员工信息系统的题(主要考察LinQ和正则表达式验证)
			
今天上午进行了公司的C# C level考核,最后一道编程题是关于员工信息系统的,题目的要求大概是这样的:1.要可以保存员工信息(XXXXX),并且要用正则表达式对输入信息进行验证:2.要可以对员工信 ...
 - FreeRTOS 独立看门狗监测任务执行状态
			
以下转载自安富莱电子: http://forum.armfly.com/forum.php 通过前面的几个章节,我们基本已经完成了 FreeRTOS 所有功能的讲解,本章节为大家介绍一种使用独立看门狗 ...
 - iOS 获取沙盒文件路径及 写入/删除 沙盒文件
			
出于安全考虑,iOS系统的沙盒机制规定每个应用都只能访问当前沙盒目录下面的文件(也有例外,比如系统通讯录能在用户授权的情况下被第三方应用访问),这个规则把iOS系统的封闭性展现的淋漓尽致. 一.沙盒中 ...
 - 3DES加密算法32个字节
			
简介 最近开发的一个项目,使用到了3DES加密算法,加密socket服务端和客户端通信的报文,因为加密秘钥是32个字节,结果折腾了一番,现在记录下来分享! 1.Des3EncryptUtils.jav ...