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>

我的问题的重要部分是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内部之后。）

请帮帮我......

Answer 1

我对这个确切问题的解决方案（在选择字段中使用fa图标）是为伪元素赋予零宽度并设置溢出样式。这有点像黑客，但它可以作为一种享受。

Answer 2

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

.selectContainer {

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

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

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

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

如何在IE10中的伪元素上模拟指针事件：none？

2 个答案: