<select> ::before图标不可点击

Question

我有一个带有几个选项的选择元素，但渲染的图标并不是该元素的一部分，因此无法点击。有什么建议吗？ 我的代码 html

<div class="styled-select icon-drop-down">
  <select class="select">
    <option value="low">Sort by: Low</option>
    <option value="high">Sort by: High</option>
    <option value="long text">long text</option>
  </select>
 </div>

css

.styled-select {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
   width: 100%;
   cursor: pointer;
   overflow: hidden;
   display: inline;
   position: relative;
   border-radius: 0;
   border: none;

   &.icon-drop-down::before {
    position: absolute;
    top: 5px;
    right: 10px;
    color: $dark-grey;
        transform: scale(0.7);
   }
}

- Julian Samarjiev

---

请查看CSS pointer-event。 - Matej Žvan

在伪元素上使用“pointer-events: none;”将使您能够像不存在一样“穿透”伪元素。https://developer.mozilla.org/en/docs/Web/CSS/pointer-events - wf4

@wf4，那难道不算作一种回答吗？ - odedta

Answer 1

在伪元素上使用pointer-events: none;将使您能够像它不存在一样“穿透”伪元素。

有关更多信息，请参见：http://developer.mozilla.org/en/docs/Web/CSS/pointer-events

- wf4

Answer 2

我遇到了类似的问题，将 pointer-events: none; 添加到 sudo 类样式中，在 Chrome 和 Firefox 中可以解决问题，但在 IE11 中不能正常工作。 我使用 display: block; 或 display: inline-block; 与 pointer-events: none; 结合使用来解决 IE 浏览器中的问题。

- Lu Zhang