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

Question

我正在使用自定义的选择/下拉菜单，参考此处的解决方案：https://dev59.com/lWkw5IYBdhLWcg3wBmCA#10190884 它的功能很好，但是选项只在单击框时才显示。 单击右侧的“箭头”不会弹出下拉选项。 有什么变通方法吗？ 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;
    }

- user1318135

---

已获得60％浏览器支持的解决方案。 有没有任何可以在IE和其他浏览器上运行的东西？ - user1318135

Answer 1

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

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

pointer-events:none;

看浏览器支持情况请访问： http://caniuse.com/pointer-events 编辑：我躺在床上，可能想到了另一个解决方案，但无法在手机上测试，也许jQuery的mousedown触发器是一个选项，在单击之前短暂隐藏箭头，也许？

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

如果我在电脑旁边，我会测试它...

- Alexander Wigmore

---

@AlexanderWigmore 有没有解决Internet Explorer的方法（即使在ie10中也无法正常工作）？ - Danield

Answer 2

太好了。感谢提供信息。喜欢内容的使用。虽然我没有安卓手机，但从我在Mac上使用FF、Saf和Chrome的情况来看，它的表现相当不错。也许可以尝试添加：

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

使用 .custom-select:after 对齐边框。

- ICW