Стиль SELECT элемент dropdown arrow

Question

Я пытаюсь добавить стили CSS и настраиваемую стрелку вниз к элементу select. Я повесил трубку на том факте, что я не мог заставить IE/Firefox показывать раскрывающийся список через JavaScript при нажатии стрелки раскрывающегося списка (as noted on SO before).

Квадрат, похоже, нашел способ стирать стрелку раскрывающегося списка элемента 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 элемент bel вл?

pointer-events: none; В CSS разрешен щелчок по изображению.