.betInfo_rou的::before元素遮挡输入框，如何解决？

你的问题核心是绝对定位的::before伪元素覆盖在输入框上方，阻断了交互。这里有两种简单有效的解决方式，既能保留渐变背景，又能让输入框正常使用：

方法1：禁用伪元素的鼠标事件 #

给伪元素添加pointer-events: none，让它完全不响应鼠标点击、输入等交互操作，点击会直接穿透到下方的输入框。这是最直接的方案，因为伪元素只是装饰性背景，不需要交互能力。

修改后的CSS：

.betInfo_rou{
  grid-area: 2/1/3/2;
  position: relative;
  &::before{
    display: inline-block;
    position: absolute;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 71.71%
    );
    content: '';
    width: 100%;
    height: 100%;
    left: -68 * $vert-1;
    pointer-events: none; /* 添加这行 */
  }
}

方法2：调整层级让伪元素在内容下方 #

通过z-index把伪元素放到父容器内容的下方，确保输入框等子元素在层级上高于伪元素。需要给伪元素设置z-index: -1，同时注意父容器不要设置背景色（否则会覆盖伪元素的渐变）。

修改后的CSS：

.betInfo_rou{
  grid-area: 2/1/3/2;
  position: relative;
  &::before{
    display: inline-block;
    position: absolute;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 71.71%
    );
    content: '';
    width: 100%;
    height: 100%;
    left: -68 * $vert-1;
    z-index: -1; /* 添加这行 */
  }
}

两种方法都能解决问题，优先推荐方法1，因为它不需要考虑父容器的背景色，逻辑更简单。

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