bootstrap中,放入input中的小图标是不能点击的。

在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见。

要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层加点击事件。

代码如下:

html: <span class="cover"></span>

css:

显示效果:

最后将border去掉即可,就可以给透明层加点击事件以达到想要的效果。

bootstrap中,放入input中的小图标是不能点击的。

在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见。

要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层加点击事件。

代码如下:

html: <span class="cover"></span>

css:

显示效果:

最后将border去掉即可,就可以给透明层加点击事件以达到想要的效果。

bootstrap中如何使input中的小图标获得点击事件的更多相关文章

  1. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  2. css使input中的值自动变大写

    <style type="text/css"> input { text-transform:uppercase; } </style>

  3. 【转】去掉HTML5中number类型input字段的小箭头

    第一种方案: 在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{    -webkit-appea ...

  4. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...

  5. C#中要使ListBox使用AddRange()时,能够触发SelectedValueChanged事件

    1. 要触发 SelectedValueChanged事件,必须要当ListBox所选中的值发生改变 基本思路是: 当AddRange()后,就马上指定ListBox的SelectedIndex,这样 ...

  6. IOS 中关于自定义Cell 上的按钮 开关等点击事件的实现方法(代理)

    1.在自定义的Cell .h文件中写出代理,写出代理方法. @protocol selectButtonDelegate <NSObject> -(void)selectModelID:( ...

  7. 在input内添加小图标或文字(元/月)等

    文字: <td class="formValue"> <div class="input-group"> <input id=&q ...

  8. 利用overflow实现导航栏中常 出现的倒三角下拉小图标

    常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...

  9. vue中解决拖动和点击事件的冲突

    BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...

随机推荐

  1. 记一次Animator状态快速切换问题的解决

    事情是这样的,我尝试在一帧内多次切换一些状态(当前状态为Idle的情况下): public Animator animator; void OnEnable() { animator.CrossFad ...

  2. 6.3 cmath--数学函数

    本模块提供了处理复数的数学函数.因此这些函数接受整数.浮点数或者复数作为參数. 6.3.1 与极坐标相互转换的函数 在Python里表示一个复数z,实部使用z.real表示,虚部使用z.imag,能够 ...

  3. 自己用的C++编码规范

    头文件结构 #ifndef COMMUNICATERHANDLLER_H #define COMMUNICATERHANDLLER_H #include "ace/Guard_T.h&quo ...

  4. 初始化git linux上传文件常见问题

    SSH生成id_rsa, id_rsa.pub后,连接服务器却报: Agent admitted failure to sign using the key 错误. 解决方法: 在当前用户下执行命令: ...

  5. netty5入门教程

    1.Netty是什么? 本质:JBoss做的一个Jar包 目的:快速开发高性能.高可靠性的网络服务器和客户端程序 优点:提供异步的.事件驱动的网络应用程序框架和工具 通俗的说:一个好使的处理Socke ...

  6. JS地毯式学习三

    1. 插件是一类特殊的程序 . 他可以扩展浏览器的功能 , 通过下载安装完成 . 比如 , 在线音乐.视频动画等等插件. // 检测非 IE 浏览器插件是否存在function hasPlugin(n ...

  7. mysqld.cc启动分析及运行过程(题目取大了,不好意思)

    mysql源文件的压缩文件mysql-5.7.12.tar.gz有48.2Mb,这么大个家伙. 以前学c语言什么的,觉得尼玛个臭c可以干嘛呀,敢看了源文件我彻底震精了,光是一个THD类的说明就占了30 ...

  8. kafka+storm+hbase

    kafka+storm+hbase实现计算WordCount. (1)表名:wc (2)列族:result (3)RowKey:word (4)Field:count 1.解决: (1)第一步:首先准 ...

  9. 怎样在IIS下配置PHP

    首先下载Windows的PHP安装包.随后将该包解压至C:\PHP.完成上面的步骤后,将C:\php目录下的php.ini-dist文件改名为php.ini,然后拷到C:\Windows目录下. 用记 ...

  10. jquery-ajax-php(内容点赞并进行cookie限制实现)

    1.模板页html例如以下: 2.模板页的jquery里的ajax实现例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T ...