html - 如何模拟指针事件 : none on an pseudo element in IE10?

Question

我在显示浏览器的普通箭头上方使用自己的箭头设置了选择样式。

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>

我的问题的重要 div 是 selectContainer，这里是 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;
    }
}

如您所见，:after 伪元素具有属性 pointer-events: none;这在实际的浏览器中工作正常，但我希望它也能在 IE10 中工作。关于这个指针事件问题有很多问题的答案，比如将元素放在 svg 元素中，但我没有在伪元素中找到任何关于指针事件的信息(你不能在 svg 中放置 :after ).

请帮帮我...

Answer 1

我对这个确切问题的解决方案(在选择字段中使用 fa 图标)是为伪元素提供零宽度并设置溢出样式。这有点像 hack，但它是一种享受。