html – 纯CSS选择菜单下拉菜单：如何制作右箭头功能？

概述我根据解决方案使用自定义选择/下拉菜单： https://stackoverflow.com/a/10190884/1318135 这个功能很棒,只有在单击该框时才显示选项.单击右侧的“箭头”不会显示下拉选项.什么是变通方法？ http://jsfiddle.net/XxkSC/553/ HTML： <label class="custom-select"> <select> <option 我根据解决方案使用自定义选择/下拉菜单： https://stackoverflow.com/a/10190884/1318135

这个功能很棒,只有在单击该框时才显示选项.单击右侧的“箭头”不会显示下拉选项.什么是变通方法？

http://jsfiddle.net/XxkSC/553/

HTML：

<label > <select>  <option>Sushi</option>  <option>Blue cheese with crackers</option>  <option>Steak</option>  <option>Other</option> </select>

CSS：

label.custom-select {position: relative;display: inline-block; }.custom-select select {    display: inline-block;    padding: 4px 3px 3px 5px;    margin: 0;    Font: inherit;    outline:none; /* remove focus ring from Webkit */    line-height: 1.2;    background: #000;    color:white;    border:0;  }/* Select arrow styling */.custom-select:after {    content: "▼";    position: absolute;    top: 0;    right: 0;    bottom: 0;    Font-size: 60%;    line-height: 30px;    padding: 0 7px;    background: #000;    color: white;   }.no-pointer-events .custom-select:after {    content: none;    }

解决方法 根据您的客户群,
一个非常简单的代码：

pointer-events:none;

请在此处查看浏览器支持：http://caniuse.com/pointer-events

编辑：只是在床上,可能想到另一个解决方案,但无法在我的手机上测试,但也许jquery mousedown触发器可能是一个选项,在点击之前暂时隐藏箭头,也许？

或者这个,不知道如何使用它,但在另一个线程中看到它：
    $( ‘#选择ID’)显示()对焦()点击().;

如果我在我的电脑上,我会测试它…

总结

以上是内存溢出为你收集整理的html – 纯CSS选择菜单/下拉菜单：如何制作右箭头功能？全部内容，希望文章能够帮你解决html – 纯CSS选择菜单/下拉菜单：如何制作右箭头功能？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。