点击自定义箭头触发后方select元素下拉，如何实现？

我有一个带自定义箭头样式的select元素，箭头是独立的自定义元素。我希望点击这个箭头时，能触发后方select元素的下拉菜单，但目前箭头会拦截鼠标点击；之前尝试给箭头添加onClick事件调用select的focus()方法，也无法触发下拉效果。有没有CSS技巧可以实现这个需求？

可以用CSS的pointer-events: none;属性直接解决这个问题，这个属性会让元素完全不响应任何鼠标事件，点击、hover等操作都会直接穿透到下方的元素上。

具体实现步骤：

• 给自定义箭头元素添加pointer-events: none;样式
• 确保select元素处于箭头的下方层级（或箭头覆盖在select上方，但因为pointer-events:none，不会拦截点击事件）

示例代码：

.custom-arrow {
  pointer-events: none;
  /* 以下为定位示例，根据你的布局调整 */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

设置完成后，点击箭头区域时，鼠标事件会直接传递给下方的select元素，自动触发下拉菜单，不需要额外的JS事件处理。如果存在层级冲突，可适当调整select的z-index属性，确保它能接收穿透过来的事件。

内容的提问来源于stack exchange，提问作者Josh Silveous