How to simulate pointer-events: none on an pseudo element in IE10?

Question

I have styled a select with an own arrow above the normal arrow that shows the browser.

The html:

<div id="selectCountry">
    <div class="selectContainer">
        <select class="selectContent">
            <option>United States of America (English)</option>
            <option>Singapore</option>
            <option>Deutschland</option>
            <option>International</option>
        </select>
    </div>
</div>

The important div for my question is the selectContainer, here the SCSS:

.selectContainer { //The container with the arrow at the right side
    font-size: rem(14);
    background-color: white;
    color: $veryDarkGray;
    height: rem(22);
    width: 80%;
    border: none;
    position: relative;
    padding: 0;
    &:after {
        font-family: 'FontAwesome';
        content: "\f078";
        pointer-events: none;
        font-size: rem(15);
        background-color: $veryDarkGray;
        position: absolute;
        top: rem(1);
        right: rem(1);
        z-index: 1;
        color: white;
        height: rem(20);
        width: rem(20);
        text-align: center;
    }

    & select {
        padding: 0 0 0 rem(2); // Padding for the box of the selects (you have to add 3px that are made by the browser per default)
        height: rem(22);
        width: 100%;
        border: rem(1) solid black;
        position: relative;
        z-index: 0;
        background: transparent;
        cursor: pointer;
    }
}

As you see, the :after pseudo element has the property pointer-events: none; this works fine in the actual browsers, but I would like it to work also in IE10. There are a lot of questions about this pointer-events issue with answers like putting the element inside a svg element, but I didn't find anything about pointer-events in pseudo-elements (you can't put an :after inside a svg).

Please help me...

Answer 1

My solution for this exact problem(using fa icons in select fields) is to give the pseudo element zero width and style the overflow. It's a bit of a hack but it works a treat.

Answer 2

The one thing you could do, if it does not break your design, is to just position the pseudo-element beneath the select-box:

.selectContainer {

  &:after {
    position: absolute;
    z-index: 5;
  }

  & select {
    position: relative;
    z-index: 10;
    background: transparent;
  }
}

The only issue with this approach would be: if the text of the selected option (or the default/first option) is wider than your .selectContainer , it would 'be over' your arrow.

There is no easy way simulating pointer-events: none; in IE10 and below.