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. 基于FPGA的异步FIFO验证

    现在开始对上一篇博文介绍的异步FIFO进行功能验证,上一篇博文地址:http://blog.chinaaet.com/crazybird/p/5100000872 .对异步FIFO验证的平台如图1所示 ...

  2. C#数据库帮助类SqlHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  3. iOS-ARC_Xcode检测循环引用

    iOS-ARC_Xcode检测循环引用 一,在桌面上新建立一个工程,在ViewController.m中输入如下代码: - (void)viewDidLoad { [super viewDidLoad ...

  4. rpc简介、原理、实例

    简介 RPC(Remote Procedure Call,远程过程调用)是建立在Socket之上的,出于一种类比的愿望,在一台机器上运行的主程序,可以调用另一台机器上准备好的子程序,就像LPC(本地过 ...

  5. ubuntu tftp 配置

    1:sudo apt-get install tftp tftpd openbsd-inetd特别指出很多文章里用的是netkit-inetd,但是实际下载时发现这个软件是下不到的,特改用openbs ...

  6. 自己写bootloader(一)

    bootloader功能目标:启动内核1.从Flash上把内核读入内存  1>读Flash:    a.NORFLASH:读内存    b.NANDFLASH:  2>初始化内存(SDRA ...

  7. tomcat架构分析(概览)

    出处:http://gearever.iteye.com Tomcat是目前应用比较多的servlet容器.关于tomcat本身的特点及介绍,网上已经有很多描述了,这里不再赘述.Tomcat除了能够支 ...

  8. 纯css3实现的幽灵按钮导航

    之前为大家介绍了好几款导航菜单,今天再给大家带来一款css3实现的幽灵按钮式的导航菜单.导航界面非常好看.右侧是一个css3实现的动画消息图标.效果图如下: 在线预览   源码下载 实现代码: htm ...

  9. Phalcon Framework的Mvc结构及启动流程(部分源码分析)

    创建项目 Phalcon环境配置安装后,可以通过命令行生成一个标准的Phalcon多模块应用 phalcon project eva --type modules入口文件为public/index.p ...

  10. Application.idle方法

    Application.Idle()方法表示:当应用程序处于空闲状态时执行相应代码. 示例程序 1.界面设计:一个简单的Lable控件 2.代码 using System; using System. ...