bootstrap中如何使input中的小图标获得点击事件
bootstrap中,放入input中的小图标是不能点击的。
在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见。
要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层加点击事件。
代码如下:
html: <span class="cover"></span>
css:
显示效果:
最后将border去掉即可,就可以给透明层加点击事件以达到想要的效果。
bootstrap中,放入input中的小图标是不能点击的。
在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见。
要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层加点击事件。
代码如下:
html: <span class="cover"></span>
css:
显示效果:
最后将border去掉即可,就可以给透明层加点击事件以达到想要的效果。
bootstrap中如何使input中的小图标获得点击事件的更多相关文章
- 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件
一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...
- css使input中的值自动变大写
<style type="text/css"> input { text-transform:uppercase; } </style>
- 【转】去掉HTML5中number类型input字段的小箭头
第一种方案: 在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appea ...
- vue中ref在input中详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...
- C#中要使ListBox使用AddRange()时,能够触发SelectedValueChanged事件
1. 要触发 SelectedValueChanged事件,必须要当ListBox所选中的值发生改变 基本思路是: 当AddRange()后,就马上指定ListBox的SelectedIndex,这样 ...
- IOS 中关于自定义Cell 上的按钮 开关等点击事件的实现方法(代理)
1.在自定义的Cell .h文件中写出代理,写出代理方法. @protocol selectButtonDelegate <NSObject> -(void)selectModelID:( ...
- 在input内添加小图标或文字(元/月)等
文字: <td class="formValue"> <div class="input-group"> <input id=&q ...
- 利用overflow实现导航栏中常 出现的倒三角下拉小图标
常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...
- vue中解决拖动和点击事件的冲突
BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...
随机推荐
- SVN的搭建与使用
1.什么是SVN? SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到 ...
- SGMII 和 Serdes 的详细说明
Serdes : SERDES是英文SERializer(串行器)/DESerializer(解串器)的简称.它是一种时分多路复用(TDM).点对点的通信技术,即在发送端多路低速并行信号被转换成高速 ...
- Cocos2d-x Scene生命周期 pushScene和replaceScene
最近在开发过程中遇到很多切换场景的时候概率性崩溃,内存暴增的问题.因此总结一些开发中需要注意的要点, 1. 切换全屏场景的时候最好使用replaceScene而不是pushScene. 因为pushS ...
- Spark使用总结与分享【转】
背景 使用spark开发已有几个月.相比于python/hive,scala/spark学习门槛较高.尤其记得刚开时,举步维艰,进展十分缓慢.不过谢天谢地,这段苦涩(bi)的日子过去了.忆苦思甜,为了 ...
- 使用konva来绘制一个矩形
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mysql sleep进程 过多
如果你没有修改过MySQL的配置,缺省情况下,wait_timeout的初始值是28800. wait_timeout过大有弊端,其体现就是MySQL里大量的SLEEP进程无法及时释放,拖累系统性能, ...
- java质量提升相关
http://blog.sina.com.cn/s/blog_6814a1510102v2rp.html
- pku oj overhang叠加卡片求最少的卡片数
这个估计是里面第二简单的了,因为第一简单的是求a+b 哈哈,一submit就ac了 题目如下: Description How far can you make a stack of cards ov ...
- Winform DatagridviewcomboboxColumn Disable Style
DataGridViewComboBoxCell cell =(DataGridViewComboBoxCell)dataGridView1[e.ColumnIndex, e.RowIndex]; c ...
- C++中static_cast, dynamic_cast使用方法
前言 Android的Framework层源代码中有非常多强制类型转换函数的调用.写惯了C代码的人一般都习惯以下这样的强制转换方式: double a = 89; int b = (int)a; 可是 ...