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. TCP数据流

    1. 引言 如果按照分组数量计算,约有一半的TCP报文段包含成块数据(如FTP.电子邮件等),另一半则包含交互数据(如telnet和rlogin).如果按照字节计算,则成块数据与交互数据的比例约为90 ...

  2. 链队列的C++实现

    #include<iostream> using namespace std; //节点类 template<class T> struct QNode { T data; Q ...

  3. python学习之str.lstrip()

    str.lstrip([chars]) 删除从开头开始指定的字符串,然后返回结果字符串. >>> '://www.example.com'.lstrip('w://') '.exam ...

  4. boost.asio源码剖析(三) ---- 流程分析

    * 常见流程分析之一(Tcp异步连接) 我们用一个简单的demo分析Tcp异步连接的流程: #include <iostream> #include <boost/asio.hpp& ...

  5. 用C++画光（二）——矩形

    在上篇文章的基础上,做了许多调整,修复了许多BUG.在解决bug的过程中,我逐渐领悟到一个要领:枯燥地一步步调试太痛苦了,找不到问题的根源!所以我选择将中间结果打到图片上.如: (注意,里面的点是我随 ...

  6. jQuery的fadeIn和fadeOut实现的轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Markdown 11种基本语法【转】

    [转自:http://www.cnblogs.com/hnrainll/p/3514637.html] 1. 标题设置(让字体变大,和word的标题意思一样)在Markdown当中设置标题,有两种方式 ...

  8. SSH高级应用（端口转发）

    转发自:http://www.cnblogs.com/sting2me/p/5167730.html 基于SSH协议的端口转发 [前言] 最近一直在使用ssh协议的端口转发(隧道)功能,完成对内网空透 ...

  9. ID、Class和标签选择器优先级

    按一般论:ID > Class > 标签 1.如以下样式: <div id="id" class="class">选择器优先权</ ...

  10. pro mvvm 读书笔记

    一.分离关注点 目的是确保每一个模块值有单一的,明确的目的,不需要去负责其他的功能.单一的目的也称为关注点. 1.1依赖 引用程序集对于依赖来说不是必须的.依赖关系可能也存在于一个代码单元要知道另一个 ...