樣式SELECT元素下拉箭頭

Question

我正在嘗試將CS​​S樣式和自定義的向下箭頭添加到select元素。 我迷上了一個事實，當單擊下拉箭頭時，IE / Firefox無法通過JavaScript顯示下拉列表（ 如之前的SO所示 ）。

Square似乎找到了一種樣式設置其select元素的下拉箭頭而不干擾瀏覽器默認行為的方法...但是我不知道他們是如何做到的。

現場觀看： https ： //squareup.com/market/jriegerco/football-season-kc-whiskey-red

我看到他們使用的是:before和:after但是如何使單擊通過下拉圖像並直接到達下面的select元素？ 這是什么騙術？

CSS：

.dropdown-wrapper i{
    background: #FFF;
    background: linear-gradient(#FFF, #FAFAFA);
    border-left-color: rgba(45, 60, 72, 0.12);
    border-radius: 0 3px 3px 0;
    height: 40px;
    line-height: 39px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 43px;    
}

.dropdown-wrapper i:before  {
    background: rgba(252, 252, 252, 0);        
    background: linear-gradient(to right, rgba(252, 252, 252, 0), #FCFCFC 20px);        
    content: "";
    height: 40px;
    position: absolute;
    left: -31px;
    top: 0;
    width: 30px;
}

.dropdown-wrapper i:after, .button-dropdown i:after {
    content: "";
    margin-top: -3px;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 50%;
}

HTML：

<div class="dropdown-wrapper">
    <select class="dropdown button">
        <option>Select an option...</option>                
    </select>
    <i></i>
</div>

Answer 1

如何允許點擊通過下拉圖像並右轉到下面的select元素？

pointer-events: none; 在CSS中，允許點擊瀏覽圖片。