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. tornado用户验证

    1.重写get_current_user()方法 class BaseHandler(tornado.web.RequestHandler): def get_current_user(self): ...

  2. NY891 区间选点 找点

    找点 时间限制:2000 ms  |  内存限制:65535 KB 难度:2 描述 上数学课时,老师给了LYH一些闭区间,让他取尽量少的点,使得每个闭区间内至少有一个点.但是这几天LYH太忙了,你们帮 ...

  3. oracle中的字符串函数详解

    花了点时间 复习.了一下字符串函数 希望对初学者有帮助 ----------连接字符串函数-----------------select concat('leiyi','hubei') from du ...

  4. dp之最长递增子序列模板poj3903

    最长递增子序列,Longest Increasing Subsequence 下面我们简记为 LIS.排序+LCS算法 以及 DP算法就忽略了,这两个太容易理解了. 假设存在一个序列d[1..9] = ...

  5. VBA 删除页

    怎么让word自动删除第3.6.9.12等3的倍数页‘ Sub kk1206190933() Dim wNum As Integer Dim wPag As Integer With Selectio ...

  6. 【Unity笔记】物体朝着鼠标位置移动

    其实思路也很简单,就是先获取到鼠标的坐标,然后赋值给目标物体即可. void Update(){ // 物体跟随鼠标移动 Vector2 mousePos = Input.mousePosition; ...

  7. FreeBSD下安装lua

    额,一行命令搞定啊 make freebsd CC=clang && make install 花了我一晚上,问题是啥呢? 我在Makefile中压根没有看到CC的定义在哪儿,然后直接 ...

  8. buildroot 搭建ftpd 服务器记录

    vsftpd 搭建失败,应该是buildroot 文件系统还有操作没有理解透,还需要不断的学习. 所以用轻量级的 ftpd 进行替代, 步骤如下: // ---> make busybox-me ...

  9. FusionCharts JavaScript API - Functions 常用方法整理笔记

    FusionCharts JavaScript API - Functions Home > FusionCharts XT and JavaScript > API Reference  ...

  10. git中文乱码解决方案

    解决方案: 在bash提示符下输入: git config --global core.quotepath false core.quotepath设为false的话,就不会对0x80以上的字符进行q ...