纯 CSS 选择菜单/下拉菜单：如何使右箭头功能？答案

【问题标题】：Pure CSS Select Menu/Dropdown: How to make right arrow function?纯 CSS 选择菜单/下拉菜单：如何使右箭头功能？
【发布时间】：2012-12-05 12:10:49
【问题描述】：

我在这里根据解决方案使用自定义选择/下拉菜单：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;
    }

【问题讨论】：

获得了 60% 浏览器支持的解决方案。任何人都可以在 IE 和其他设备上运行任何东西吗？

标签： html css drop-down-menu

【解决方案1】：

根据您的客户群，一段非常简单的代码：

pointer-events:none;

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

编辑：刚刚在床上，可能想到了另一种解决方案，但无法在我的手机上进行测试，但也许 jQuery mousedown 触发器可能是一个选项，在点击前一瞬间隐藏箭头，也许？

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

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

【讨论】：

@AlexanderWigmore 有没有针对 Internet Explorer 的解决方法（即使在 ie10 中也不起作用）

【解决方案2】：

这很好。谢谢（你的）信息。喜欢使用内容。没有 Android，但从我在 FF、Saf 和 Chrome 上的 Mac 中看到的情况来看，它运行良好。可以尝试添加：

-moz-border-radius: 0px 20px 20px 0px;
-webkit-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;`=

到 .custom-select:after 来对齐边框。

【讨论】：