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. 在java代码中用xslt处理xml文件

    java处理xml文件 import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExceptio ...

  2. nyoj 715 Adjacent Bit Counts

    描述 For a string of n bits x1, x2, x3, …, xn,  the adjacent bit count of the string  is given by      ...

  3. [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图

    关于如何移植SDL2.0到安卓上面来参考我的上一篇文章:[原]零基础学习SDL开发之移植SDL2.0到Android 在一篇文章我们主要使用SDL2.0来加载一张BMP图来渲染显示. 博主的开发环境: ...

  4. arm B和BL指令浅析

    arm B和BL指令浅析 B或BL指令引起处理器转移到“子程序名”处开始执行.两者的不同之处在于:(1)BL指令在转移到子程序执行之前,将其下一条指令的地址拷贝到R14(LR,链接寄存器).      ...

  5. Makefile学习之路——1

    编写makefile,不是一个猛子扎进去试着写一个规则并对之调试,而应该先采用面向依赖关系的思考方法勾勒出makefile要表达怎样的依赖关系,这一点尤为重要.通过不断地练习这种思考方法,才可能达到流 ...

  6. MongoDB学习之(二)java连接

    上一章完了下mongodb的安装和IDE工具,现在开始使用java进行连接. 第一步:使用jar包, 这里需要三个包,具体为啥我也不清楚,反正因为报错,我就按照官方文档一个个的都下载了. 链接:htt ...

  7. 【WPF】ListBox使用UserContrl作为子控件,引入UserContrl界面

    <ListBox x:Name="housePlansLB" Margin="0" ItemsSource="{Binding HousePla ...

  8. Android AsyncTask 源代码分析

    AsyncTask源代码分析 public abstract class AsyncTask<Params, Progress, Result> { //日志TAG private sta ...

  9. pku1204 Word Puzzles AC自动机 二维字符串矩阵8个方向找模式串的起点坐标以及方向 挺好的!

    /** 题目:pku1204 Word Puzzles 链接:http://poj.org/problem?id=1204 题意:给定一个L C(C <= 1000, L <= 1000) ...

  10. redis4安装

    第一步官网下载 https://redis.io/ rz 上传或者直接wget   http://download.redis.io/releases/redis-4.0.2.tar.gz 2.将其下 ...