CSS伪元素致表单无鼠标交互：如何保留边框并启用表单功能？

嘿，这个问题我太熟悉了——绝对定位的伪元素很容易变成交互的「隐形障碍」！

你的表单元素无法响应鼠标操作、看不到光标，核心原因是：.cta .cta-inner:before 这个伪元素是绝对定位，它完全覆盖了 .cta-inner 容器的整个区域，而且默认的层级（z-index）比内部的输入框、按钮更高，导致所有鼠标事件都被这个伪元素拦截了，表单元素根本接收不到任何交互信号。

下面给你两种能保留原有边框样式、同时恢复表单功能的方案：

方案1：让伪元素忽略鼠标事件（推荐） #

给伪元素添加 pointer-events: none 属性，它会让伪元素完全跳过所有鼠标事件，事件会直接穿透到下面的表单元素上，完美保留边框样式的同时解决交互问题：

.cta .cta-inner:before {
  border-radius: 0.5rem;
  content: '';
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.85);
  pointer-events: none; /* 新增这一行 */
}

方案2：调整层级让表单内容「浮」在伪元素上面 #

通过设置 z-index，让 .cta-inner 容器的内容层级高于伪元素：

.cta .cta-inner {
  position: relative;
  padding: 3rem;
  margin: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 1; /* 让容器内容层级更高 */
}
.cta .cta-inner:before {
  border-radius: 0.5rem;
  content: '';
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.85);
  z-index: 0; /* 明确伪元素层级低于容器 */
}

两种方案都能让你的输入框恢复光标输入、按钮正常响应点击，同时完全保留你想要的边框视觉效果。

内容的提问来源于stack exchange，提问作者Koen Hollander