输入宽度增加时，setCustomValidity位置会发生变化

问题描述 投票：0回答：1

我有两个带有setCustomValidity的输入。

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

enter image description here

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

enter image description here

<!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>

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

html css
1个回答
2
投票

你无法改变它

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

那么开发人员应该做些什么呢？好吧，虽然浏览器不允许您自定义其气泡，但约束验证规范允许您禁止浏览器的气泡UI并构建您自己的气泡。本文的其余部分将向您展示如何做到这一点。

Source

删除并替换

但是，您可以删除它并使用其他内容。

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

另一种解决方案，使用alert

见：Invalid Alert

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.