html - <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);
   }
}

Answer 1

pointer-events: none; 伪元素将使您能够“点击”伪元素，就好像它不存在一样。

更多信息见: http://developer.mozilla.org/en/docs/Web/CSS/pointer-events