Question

我有两个带有setCustomValidity的输入。

在第一个输入中，setCustomValidity位置在左侧位置，换句话说，在正确的位置，如下图所示：

但是在另一个属性中，属性setCustomValidity工具提示出现在中间，如下图所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TEST</title>
</head>
<body>

    <form>
        <label>Code:</label>
        <input type="text" maxlength="3" required oninvalid="this.setCustomValidity(); "/>

        <label>Description:</label>
        <input type="text" maxlength="3" required oninvalid="this.setCustomValidity();" style="width: 500px;"/>

        <button type="submit">Submit</button>
    </form>

</body>
</html>

如何将工具提示放在第一个图像的左侧位置？

Answer 1

您无法更改

无论出于何种原因，我们开发人员（或更可能是我们的设计师   同事）对这些东西的风格有着深厚的渴望。但   不幸的是我们不能，因为零浏览器提供了样式钩子，   针对这些气泡。 Chrome曾经提供了一系列供应商   带前缀的伪元素（::-webkit-validation-bubble- *），但它们   已在Chrome 28中删除。

那么开发人员要做什么？好吧，尽管浏览器不允许您   为了自定义气泡，约束验证规范确实允许   您可以隐藏浏览器的气泡UI并自行构建。其余的部分   这篇文章的内容向您展示了如何做到这一点。

Source

删除并替换

但是，您可以将其删除并改用其他东西。

请参阅：How to remove validation-bubble-message in form validation

另一种解决方案，使用alert

请参阅：Invalid Alert

输入宽度增加时setCustomValidity位置更改

1 个答案:

您无法更改

删除并替换