添加到字段标签的错误图标是可单击的

Question

您好，

对于字段级错误验证，我们将错误图标（X红色图像）添加到字段标签作为背景图像。

现在，因为它作为背景图像添加到标签，它显示为可点击[但是只说标签被点击]，当点击完成错误图标时，焦点移动到字段输入。

我们可以在标签旁边添加单独的img元素，但仍然是

我想知道有没有办法让错误图标无法点击，仍然将其添加为背景图片。

谢谢

Answer 1

是的，你可以添加css到该元素或父元素，以避免它接收点击。你没有在你的问题上发布代码，所以这是一个一般的例子。我使用了类avoid-clicks，您应该将其添加到错误标签或其父级。只需避免添加对输入字段也常见的父级。

.avoid-clicks {
  pointer-events: none;
}

请注意，用户希望能够点击X，并且不会改变预期的行为并降低您网站上的用户体验。