스타일 선택 요소 드롭 다운 화살표

Question

select 요소에 CSS 스타일과 맞춤형 아래쪽 화살표를 추가하려고합니다. 드롭 다운 화살표 (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는 클릭을 허용합니다.