CSS：选择元素下方的内容导致点击不起作用

Posted 2023-03-11

【中文标题】CSS：选择元素下方的内容导致点击不起作用

【英文标题】：CSS :after content below a select element causes click not to work

【发布时间】：2014-11-04 19:42:43

【问题描述】：

我有这个（简化的）css 用于选择元素以摆脱特定于浏览器的外观

.select
    display:inline-block;
    position:relative;

.select:after
    position:absolute;
    bottom:0;right:0;
    content:'\2193'; 

select
    appearance:none; (-moz and -webkit too)
    width:100%;
    height:100%;

（最好在http://jsfiddle.net/kwpke3xh/中看到）

body
    background:#eef;
    font-family:sans-serif;

.select
    display:inline-block;
    background-color:#fff;
    border-radius:.5em;
    border:.1rem solid #000;
    color:#013;
    width:8em;
    height:1.5em;
    vertical-align:middle;
    position:relative;

.select:after
	position:absolute;
	bottom:.15em;top:.15em;right:.5rem;
	content:'\2193'; 

select
    -webkit-appearance:none;
   -moz-appearance:none;
   	appearance:none;
    font:inherit;
    border:none;
    background-color:transparent;
    color:inherit;
    width:100%;
    height:100%;
    padding:0 .5em;

<span class="select">
    <select>
        <option>A</option>
        <option>B</option>
    </select>
</span>

看起来不错，除了 Firefox 仍然显示箭头（如 Firefox 30.0 - -moz-appearance: none not working 所述）

唯一的技术问题是，当我点击选择元素时，它会显示选项元素，但如果我直接点击箭头，它不会。

有没有办法避免这种情况？

【参考方案1】：

最简单的 CSS 解决方案是将 pointer-events: none 添加到伪元素。这样做时，您可以单击元素，因为鼠标事件已被移除。

Updated Example

.select:after 
    position:absolute;
    bottom:.15em;
    top:.15em;
    right:.5rem;
    content:'\2193';
    pointer-events: none;

^{（只需考虑browser support for the property。）}

【讨论】：

谢谢！今天学到了一些新东西。