纯CSS选择菜单/下拉菜单:如何制作右箭头功能？

Question

我根据解决方案使用自定义选择/下拉菜单:https://stackoverflow.com/a/10190884/1318135

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

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

HTML:

<label class="custom-select">
 <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;
    }

Answer 1

根据您的客户群,一个非常简单的代码:

pointer-events:none;

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

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

或者这个,不知道如何使用它,但在另一个线程中看到它:$('#select-id').show().focus().click();

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