如何模拟指针事件：IE10 中的伪元素上没有？答案

【问题标题】：How to simulate pointer-events: none on an pseudo element in IE10?如何模拟指针事件：IE10 中的伪元素上没有？
【发布时间】：2015-07-16 10:17:04
【问题描述】：

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

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 )。

请帮帮我...

【问题讨论】：

标签： html css

【解决方案1】：

我对这个确切问题的解决方案（在选择字段中使用 fa 图标）是给伪元素零宽度并设置溢出样式。这有点像 hack，但它很管用。

【讨论】：

【解决方案2】：

如果它不破坏您的设计，您可以做的一件事就是将伪元素放置在选择框下方：

.selectContainer {

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

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

这种方法的唯一问题是：如果所选选项（或默认/第一个选项）的文本比您的 .selectContainer 宽，它会“超过”您的箭头。

在 IE10 及以下版本中模拟pointer-events: none; 没有简单的方法。

【讨论】：