bootstrap中如何使input中的小图标获得点击事件

bootstrap中，放入input中的小图标是不能点击的。

在表单中经常遇见密码旁边的眼睛图标点击后，可使密码可见。

要使小图标获得点击事件，可在小图标上覆盖一个跟小图标一样大的透明层，然后给透明层加点击事件。

代码如下：

html: <span class="cover"></span>

css:

显示效果：

最后将border去掉即可，就可以给透明层加点击事件以达到想要的效果。

bootstrap中，放入input中的小图标是不能点击的。

在表单中经常遇见密码旁边的眼睛图标点击后，可使密码可见。

要使小图标获得点击事件，可在小图标上覆盖一个跟小图标一样大的透明层，然后给透明层加点击事件。

代码如下：

html: <span class="cover"></span>

css:

显示效果：

最后将border去掉即可，就可以给透明层加点击事件以达到想要的效果。

转载于:https://www.cnblogs.com/sjqq/p/9072941.html

bootstrap中如何使input中的小图标获得点击事件相关推荐

uniapp在onLaunch中使用redirectTo或reLaunch跳转页面后点击事件失效
问题描述: 使用uniapp编译成小程序时,在生命周期onLaunch中运用redirectTo或reLaunch跳转页面后点击事件失效,但是如果你重定向的页面中有使用navigator组件跳转后再返 ...
前端兼容性问题：快速去掉mac safari浏览器input右边的小图标/小按钮
去掉mac safari浏览器input右边的小图标/小按钮 input:focus::-webkit-contacts-auto-fill-button{opacity: 0; } 复制代码去掉S ...
Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）
一.知识点: 带 icon 的输入框,可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标. 因为图标涉及点击 ...
小程序-绑定点击事件
小程序-绑定点击事件微信小程序-事件-文档: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.h ...
uniapp 在onLaunch中使用redirectTo或reLaunch跳转页面后点击事件失效
好久没有记录了(今天更新下),使用uniapp编译成小程序时,在onLaunch中重定向会导致点击事件失效,但是,如果,你重定向的页面中有使用navigator组件跳转后再返回,点击事件又有效了,在原 ...
Android中设置RecyclerView的每一个item的单项点击事件
场景 Android中使用Adapter(适配器)给RecycleView设置数据源: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
input里添加小图标（实用、赞）
https://blog.csdn.net/chengQunBin/article/details/78505654 方法一将小图标当做input的背景来插入,直接上代码吧: <style t ...
代码生涯冲常见的的bug.例如layui表格中日期自动生成、eacharts 报表的重复点击事件
1.layui表格中日期不受控制的自动生成,这种情况往往是你设置了日期类型的强转例对于这种情况你需要定义templet模板 1. {field: 'outtime', title: '离开时间', ...
按钮点击_如何设置微信小程序按钮点击事件？
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...

bootstrap中如何使input中的小图标获得点击事件

bootstrap中如何使input中的小图标获得点击事件相关推荐

最新文章

热门文章