纯CSS实现点击图片触发select下拉框使之展开
如下图,下拉框最右边的箭头是一个图片,
代码为:
<span class="rightRegion">客户<font color="#EA609D">*</font></span>
<select name="advertiserId" required class="ipt">
<option value="0">腾讯</option>
<option value="1">阿里</option>
<option value="2">百度</option>
</select>
<div class="iconfont icon-jiantou-copy-copy" id="select-jiantou"></div>
<style>
#select-jiantou{
width: 16px;
height: 16px;
margin: 0;
font-size: 14px !important;
float: left;
line-height: 34px;
margin-left: -20px;
cursor: pointer;
}
</style>
此时,点击箭头下拉框并没有反应,最初的想法是点击图片时触发下拉框的点击事件,
$("#select-jiantou").click(function () {
$(this).prev().click();
})
发现可以拿到select这个对象,但是点击事件并没有触发成功。
最后发现,在select-jiantou的CSS中添加pointer-events: none,点击箭头便可展开下拉框。
pointer-events属性值详解
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
---------------------
作者:没有了梦想的咸鱼
来源:CSDN
原文:https://blog.csdn.net/animatecat/article/details/81285852
版权声明:本文为博主原创文章,转载请附上博文链接!
纯CSS实现点击图片触发select下拉框使之展开相关推荐
- c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
- html select滚动条样式修改,如何定义Select下拉框的边框颜色和滚动条样式
如何定义Select下拉框的边框颜色和滚动条样式 (2012-11-07 15:00:25) 标签: 定义select下拉框 select定义css不显示 杂谈 如何定义Select下拉框的边框颜色和 ...
- 点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
- html5 下拉框 美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法 在页面中引入tasty ...
- css div 下拉框内容自适应,div+css模拟select下拉框
无标题文档 .mod_select ul{margin:0;padding:0;} .mod_select ul:after{ display: block; clear: both; visibil ...
- CSS-解决苹果点击高亮、安卓select灰色背景(select下拉框在IOS中背景变黑、出现阴影问题)
CSS-解决苹果点击高亮.安卓select灰色背景(select下拉框在IOS中背景变黑.出现阴影问题) 参考文章: (1)CSS-解决苹果点击高亮.安卓select灰色背景(select下拉框在IO ...
- Android之解决webview加载第三方网页点击弹不出下拉框(html页面里面的select标签)
1 问题 决webview加载第三方网页点击弹不出下拉框(html页面里面的select标签),我们访问youtube.com官网,点击网站的视频,点击视频右上角三个点设置,然后点击 播放设置 然后点 ...
- select下拉框如何触发函数并传递参数
select下拉框和函数触发怎么写 首先需要写select下拉框的HTML代码,标准格式如下 <form><select id="para_region" nam ...
- html设置下拉筛选可以多选,select下拉框(支持筛选、多选)
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- select下拉框(支持筛选、多选)
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
最新文章
- 一个form表单,多个提交按钮(实现不同功能和地址的提交)
- 0222互联网新闻 | 快手推游戏直播App“电喵直播”及工具型App光音Mulight;“AI音乐学院”完成PreA轮融资...
- Xcodebuild自动打包
- .NET 6新特性试用 | TryGetNonEnumeratedCount
- 白话C++系列(27) -- RTTI:运行时类型识别
- java如何实现广告弹窗,WPF实现消息提醒(广告弹窗)
- Spring Cloud Eureka Server 源码解析(七)处理客户端增量下载请求、读写锁问题
- OSC802 USB虚拟示波器开箱与测评
- php 路由修改密码,TPLINK路由器如何修改管理密码和无线密码)
- mfc 中文乱码转换为正常中文_中文编码转换
- 介绍一个开源博客项目并部署到Nginx服务器
- 树莓派(4B)DHT11实现温湿度获取+mysql数据库存储
- 【计组】懂了,时钟周期、机器周期、指令周期、总线周期、存储周期。
- 【JavaScript】this指向经典面试题(超详细)
- Sql Server 指定日期所在周的第一天和最后一天
- Logisim中文版 免JAVA环境 免安装
- 基于SSH开发校园失物招领网
- 创新数据库技术 成就IOD愿景携DB2 25载创新 IBM推新“信息议程”
- mysql导出数据到csv的方式
- layer tips 宽和高自定义