Adding jQuery event handlers to pseudo selectors

Question

I have change the style for custom select box, even changed the arrow with css :after property.

Now my problem is when ever i clicked on down arrow drop down is not opening. Its correct because its on top of select box. How i can make it work so when user click on down arrow dropdown should open.

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 - used to place the arrow besides the select element

.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;
}

Working Demo here.

How can I bind a click event on arrow, so it will open the select box.

You can't bind a click to a pseudo element (not with JS anyway, maybe there's a CSS hack). — Shikkediel
– Shikkediel, Commented Sep 25, 2015 at 2:42

Buzinas · Accepted Answer · 2015-09-25 02:37:56Z

2

You can use the CSS below:

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

It will prevent the click events on the arrow, so it will bubble to the parent, making it work as you want.

Updated CodePen

answered Sep 25, 2015 at 2:37

Buzinas

11.7k2 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Soarabh Over a year ago

I was aware about pointer-events: none, but didn't think on this way. very good work around.

Collectives™ on Stack Overflow

Adding jQuery event handlers to pseudo selectors

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related