输入宽度增加时 setCustomValidity 位置发生变化答案

【问题标题】：setCustomValidity position changes when input width increase输入宽度增加时 setCustomValidity 位置发生变化
【发布时间】：2018-09-11 13:50:07
【问题描述】：

我有两个带有 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>

如何将工具提示放在左侧位置，就像第一张图片一样？

【问题讨论】：

您需要添加一些代码，以便我们查看问题所在。从图片中，猜测是 .myform label { text-align: left; }
@InvariantChange 很抱歉，忘记代码，我会尝试你的解决方案，但不起作用。
你也有 CSS 吗？
@InvariantChange 再次抱歉。
@InvariantChange 有所有代码，我没有使用外部 css。仅 HTML

标签： html css

【解决方案1】：

你无法改变它

无论出于何种原因，我们开发人员（或者更有可能是我们的设计师）同事）有一种根深蒂固的愿望来设计这些东西。但不幸的是我们不能，因为零浏览器提供了样式钩子瞄准这些泡沫。 Chrome 曾经提供过一系列供应商前缀伪元素 (::-webkit-validation-bubble-*)，但它们在 Chrome 28 中被移除。

那么开发人员应该做什么？好吧，虽然浏览器不允许你要自定义它们的气泡，约束验证规范确实允许您可以抑制浏览器的气泡 UI 并构建自己的。其余的部分这篇文章的部分向您展示了如何做到这一点。

Source

删除和替换

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

见：How to remove validation-bubble-message in form validation

另一种解决方案，使用alert

见：Invalid Alert

【讨论】：

完美，使用“alert”使解决方案易于构建我自己的工具提示。