如何使div层忽略用户点击，并允许点击传递给下面的div / select？

Question

http://codepen.io/leongaban/pen/ztIua

我在这里有一个自定义样式选择，上面有一个svg下拉箭头。但是，如果您尝试单击箭头本身，则由于某种分层层次结构而无法打开选择。反正是否禁止使用CSS点击该div？

<h2>
    <div class="drop_arrow"></div>
    <select id="getRoute">
        <option class="routeSelector">Onboarding</option>
        <option class="routeSelector">Engagement</option>
        <option class="routeSelector">Popular Searches</option>
        <option class="routeSelector">Unregistered</option>
    </select>
</h2>

#getRoute {
    margin-right: 5px;
    margin-left: -20px;
    padding: 5px;
    width: 180px;
    font: 16px LatoBold;
    -webkit-appearance: none;
}

.drop_arrow {
    position: relative;
    float: left;
    top: 10px;
    left: 150px;
    width: 18px;
    height: 12px;
    background-position: -520px 0px;
    background-size: 1600px 1600px;
    background-image: url(http://leongaban.com/images/dash.svg), none;
-moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
}

Answer 1

我相信我找到了解决方案。

添加JS：

function dropDown(){
  var dropdown = document.getElementById('getRoute');
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
}

并在箭头单击上触发此操作应该可以解决问题。

http://codepen.io/anon/pen/xiDmw

Answer 2

给下拉列表相对位置（使其位于堆栈顺序中的箭头上方）和透明背景（因此通过下拉列表可以看到箭头）：

#getRoute {
    ...
    background-color: transparent;
    position: relative;
}

http://codepen.io/anon/pen/bcjgJ

Answer 3

css用于显示而不是单击事件。

您需要使用js将点击转发到您想要的元素