html - 如何让一个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

给下拉列表相对位置(以便它在堆栈顺序中位于箭头上方)和透明背景(因此箭头在下拉列表中可见):

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

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