Question

有没有办法阻止指针/光标使用CSS与select元素后面的元素交互？这似乎只发生在IE11中。

这是一个显示我的问题的jsFiddle：http://jsfiddle.net/6mzhgmvj/。

随附的代码如下：

<!DOCTYPE html>
<html>
<body>

<select autofocus>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<p><strong>Note:</strong> The autofocus attribute of the select tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.</p>

</body>
</html>

Repro步骤：

展开下拉菜单。
将鼠标悬停在选项上。
当鼠标悬停在选项3和4上时，光标会在“默认”和“文本”之间快速切换，因为展开后它后面有一个段落元素。

对此的任何帮助都会很棒。

Answer 1

正如我在评论中已经提到的那样，问题Bad cursor in select/option, IE的答案提示了一个相当复杂的JS解决方案。

可以像这样完成一些更简单的事情：

<span><select>
/* options here */
</select></span>

span {
    position:relative;
    z-index:0;
}
span:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:rgba(255, 0, 0, .25);
    z-index:-1;
}

我们在span元素周围添加select，然后在select ~~下面设置cursor:pointer设置的伪元素。这使得光标保持指针，即使下面的选项被悬停。~~编辑：实际上，我在早期版本中使用cursor:pointer，但后来我意识到光标IE使用对于选择选项是一个不同的选项，设置光标似乎根本不需要 - 鼠标指针所在的元素没有任何直接文本内容似乎已经足够了。

（当有更多选项时，您可能希望增加伪元素的高度。）

不需要background颜色，我只是将其放入，以便在伪元素所在的位置清晰可见。删除背景，它仍然可以正常工作。

一个小缺点：伪元素必须位于z轴上的以下内容之上，否则段落将再次“接管”，并且我们遇到与以前相同的问题。由于可用性可能会受到影响（无法开始在该伪元素下面选择文本，其下的可聚焦元素将无法点击），这是另一个版本，只有在select具有焦点时才能使该元素可见： / p>

<span>
  <select>
  /* options here */
  </select>
  <span></span>
</span>

span {
    position:relative;
    z-index:0;
}
span span {
    display:none;
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:rgba(255, 0, 0, .25);
    z-index:-1;
}
span select:focus + span {
    display:block;
}

http://jsfiddle.net/CBroe/y4k35rqn/1/

这使用相邻的兄弟组合子使元素仅在select具有焦点时显示 - 这就是我在这里使用额外span元素的原因，因为否则我将没有“下一个兄弟”以焦点select为目标。

（当你绝对需要select设置autofocus属性时，这当然不能很好地工作，为什么我在这里删除它。也许这是你愿意做出的妥协。或者，如果元素在页面加载时显示也没有坏处，因为用户必须先从select移除焦点，然后才能与其他元素进行交互。您的选择。）

Answer 2

这绝对是一个IE问题。虽然有很多解决方案可以让自动对焦在IE中工作（在stackoverflow本身），但是这些解决方案都没有帮助，因为主要问题是段落标记顶部的选择下拉列表。

这是一个可以帮助你的黑客：D

p {
    cursor: default;
}

请注意，这只是一个黑客攻击，并没有解决根本问题。我也想知道一个更好的解决方案。

有没有办法阻止指针/光标使用CSS与select元素后面的元素交互？

2 个答案: