自定义 Bootstrap 的验证工具提示？

Posted 2023-02-22

【中文标题】自定义 Bootstrap 的验证工具提示？

【英文标题】：Customizing Bootstrap's validation tooltip?

【发布时间】：2013-04-13 22:45:56

【问题描述】：

有人可以向我解释如何自定义 Bootstrap 的 input type="email" 验证工具提示，如下所示？

或者更好的是，有人能解释一下如何自定义 Bootstrap 的验证工具提示吗？

---

编辑：

Le_Morri 已经指出这实际上是一个 html 5 验证工具提示。我将把这个问题留给与我犯同样错误的其他人。

以下问题将有助于 HTML5 验证样式，

How do you style the HTML5 form validation messages? How do I style the html 5 form validation error messages with css?

【问题讨论】：

据我所知，它们是由浏览器设计的。 Here 你有一个如何构建解决方法的指南。

@Le_Morri，哦，哇，我不知道这是 HTML5 的事情，并假设 Bootstrap 正在这样做。你能把你的评论变成一个答案，这样我就可以给你一些分数了吗？

【参考方案1】：

据我所知，这些验证工具提示并非来自引导程序。它们是 HTML5 功能，由浏览器提供和设置样式。

Here您可以找到如何创建自己的验证工具提示的指南。

在 Webkit 浏览器中，您可以使用以下方式设置这些工具提示的样式：

::-webkit-validation-bubble-message 
    padding: 1em;

使用 CSS :invalid 选择器，您可以设置错误输入的样式