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. [na]mail收发过程

    以前老记不住这smtp和pop3谁收谁发. 简单邮件传输协议(SMTP),用来发送或中转发出的电子邮件,       占用tcp 25端口. 第三版邮局协议(POP3),用于将服务器上把邮件存储到本地 ...

  2. ELK的索引的坑——Kibana的图形化(Tile Map)

    如果想通过ELK展示地图, 需要将索引名称修改为:logstash*的格式 否则location字段不会修改成geo_point的形式. 详情参考:http://blog.csdn.net/yangg ...

  3. js实现新闻条目滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. C# 延时函数 非Sleep

    1.示例: using System.Runtime.InteropServices; [DllImport("kernel32.dll")] static extern uint ...

  5. Cannot complete request to Marketplace不能打开eclipse marketplace

    当打开eclipse marketplace的时候时候,发现有如下错误: --------------------------------------------------------------- ...

  6. [镜像]镜像操作losetup

    安装完之后查看一下版本 /usr/sbin/debootstrap –version转自:http://blog.csdn.net/cnyyx/article/details/27182833 1.挂 ...

  7. JavaScrip——练习(做悬浮框再进一步:悬浮窗后缀悬浮窗——用this.className)

    对悬浮窗进一步改进: 用this.className 可以省略script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  8. 【SpringMVC笔记】第四课 注解的处理器映射器和处理器适配器使用

    一.注意点: 版本问题 spring3.2以前的版本,注解的映射器和适配器使用以下两个类. org.springframework.web.servlet.mvc.annotation.Default ...

  9. SSM 整合

    --- 分为三层: DAO层:负责与数据源进行交互 Service:业务处理层,也可称为服务层,对上层提供统一接口的服务. Controller: 控制器层,负责处理来自客户端的请求. 通用配置: d ...

  10. tab标签

    <ul class="nav nav-tabs" role="tablist" role="tablist" id="myT ...