问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何让加在select上的图片点击后触发select

头像
rain
    5037120243

    如下代码，利用td::after为select加了下拉图片，怎么才能点击蓝色区域触发select？？
    PS：一定要是select，因为插件就是select改不了

    clipboard.png
    尝试过：

     $('.select-ele').each(function () {
       $(this).on('click', function (e) {
           $(this).children('select').trigger('click');
            })
  });

    clipboard.png

    <td class="select-ele">
<select>A</select>
</td>
<td class="select-ele">
<select>B</select>
</td>

    clipboard.png

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table tr td {
            width: 105px;
            height: 50px;
            line-height: 50px;
            position: relative;
        }

        table tr td select {
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            height: 50px;
            padding-left: 15px;
        }

        table tr td.select-ele::after {
            content: '﹀';
            color: #ffffff;
            font-size: 24px;
            display: block;
            width: 36px;
            height: 50px;
            line-height: 50px;
            position: absolute;
            top: 2px;
            right: 0;
            background: skyblue;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td class="select-ele"><select name="city" id="city">
                        <option value="1">深圳</option>
                        <option value="2">广州</option>
                        <option value="3">杭州</option>
                    </select></td>
                <td></td>
            </tr>
        </tbody>
    </table>

</body>

</html>
    javascript
    阅读 2.3k
    1 个回答
    得票最新
    头像
    北堂棣
      6.6k94268
      ✓ 已被采纳
      在select-jiantou的CSS中添加pointer-events: none，点击箭头便可展开下拉框。

      pointer-events属性值详解
      auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
      none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

      原文链接：纯CSS实现点击图片触发select下拉框使之展开

      搞了半天事件，结果发现是样式的问题。
      在你的table tr td.select-ele::after样式中增加 pointer-events: none就好了：
      查看效果

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      被 1 篇内容引用
      推荐问题