Добавление обработчиков событий jQuery в псевдоселекторы

Question

Я изменил стиль для пользовательского поля выбора, даже изменил стрелку с помощью свойства css: after.

Теперь моя проблема в том, когда я нажимаю стрелку вниз, вниз не открывается. Его правильно, потому что он находится поверх окна выбора. Как я могу заставить его работать, поэтому, когда пользователь нажимает на раскрывающийся список вниз, следует открыть его.

HTML

<div class="select-holder select-wrap poRel col-xs-4 col-sm-4 cntry-drop-down is-valid"> 
    <select class="select-item validate-me p-normal-text is-valid" data-validation-type="select_validation" id="ship_country" name="ship_country" data-default-msg="Country" autocomplete="off" tabindex="3"> 
    <option class="p-normal-text default-selected-value" value="" selected="selected">Country</option> 
    <option class="p-normal-text" value="US" selected="">USA</option> 
    <option class="p-normal-text" value="AU">Australia</option> 
    </select> 
</div> 

CSS - используется для размещения стрелку кроме select элемента

.select-holder:after { 
    top: 12px; 
    position: absolute; 
    left: calc(100% - 50px); 
    width: 0; 
    height: 0; 
    content: "\e259"; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-size: 1.2em; 
} 

Работа Demo here.

Как связать событие click со стрелкой, чтобы открыть окно выбора.

Answer 1

Вы можете использовать ниже CSS:

.select-holder:after { 
    pointer-events: none; 
    /* the rest of your code */ 
} 

Это предотвратит событие нажатия на стрелки, так что будет пузыриться к родителю, что делает его работу, как вы хотите.

Updated CodePen