风格SELECT元素下拉箭头

Question

我试图添加CSS样式和自定义向下箭头到select元素。当我点击下拉箭头时（as noted on SO before），我无法通过JavaScript显示IE/Firefox的下拉列表。

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允许点击穿过图像。