html - HTML 输入错误消息在 iOS 上看起来很难看。如何造型？

Question

我想使用原生 HTML5 输入属性（如required或pattern）对表单进行前端验证。它工作正常，但在 iOS 上，错误消息未正确对齐容器（“气泡”）。我确信它与我的 CSS 有关，但是当以零样式和脚本运行页面时，它看起来仍然很丑陋。

例如，MDN 上最简单的示例required如下所示：

iOS 上的默认解决方案看起来如此糟糕，这似乎真的很奇怪。macOS 上的 Safari 似乎可以正确显示它：

我发现有一些特殊的与 Webkit 相关的 CSS 选择器，我尝试应用它们，但新的 Safari 版本似乎没有考虑这些样式：

    ::-webkit-validation-bubble-message {
        color: red;
        padding-top: 20px;
    }

我该怎么做才能使它看起来正确？

标签： htmlcssiossafarimobile-safari