<select> ::在图标无法点击之前

Question

我有一个带有几个选项的select元素,但渲染的图标不是元素的一部分,因此不可点击.有任何想法吗？

我的代码

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