Css 控制输入提示

一些浏览器根据输入类型向用户提供输入字段提示，例如此处的

type=“email”

：

铬：

Firefox:

我的问题是：

• 这些是任何规格的一部分吗
• 是否有方法控制该消息（消息本身以及禁用/启用它）
• 有没有办法设置此工具提示的样式

---

只需提供一个title属性，并使用您的内容来显示，而没有办法对其进行样式化，要对其进行样式化，您需要包括jquery库

---

这是来自

---

它的浏览器行为，所以它不能被修改，但你可以做一些像工具提示或提示使用引导css框架

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> 

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

---

你可以找到一些例子来定制这些消息的外观和文本，你必须使用JavaScript，仅仅使用HTML和CSS是没有办法的

您可以使用以下内容：

var email = document.getElementById("mail");

    email.addEventListener("input", function (event) {
      if (email.validity.typeMismatch) {
        email.setCustomValidity("I expect an e-mail, pls!");
      } else {
        email.setCustomValidity("");
      }
    });

HTML5引入了新的表单机制：它为元素和约束验证添加了新的语义类型，以简化在客户端检查表单内容的工作。

如果要在HTML5中禁用表单的客户端验证，请向表单元素添加novalidate属性。外汇：

<form method="post" action="/foo" novalidate>...</form>

。。。

谢谢你的回答，问题是title属性不是有条件的，它总是会出现，不管用户是否已经在电子邮件字段中输入了一个

@

，以进行验证，你需要像这样添加库，这实际上不是真的，您可以使用本机HTML5实现相当高的验证级别。本机HTML5只能帮助您进行电子邮件验证，对于用户名或密码强度的其他自定义验证，最好使用jquery库，因为像WindowsSafari这样的浏览器不能顺利地使用它。包括jquery+jquery插件只是为了验证对我来说并不理想。您可以使用

模式

属性和最小-最大长度来实现密码强度。不幸的是，这似乎不起作用。查看我的更新问题。哦，对不起，我以为你指的是其他问题。查看我的更新问题，我在Firefox中尝试过，但似乎不起作用。@AvraamMavridis也许这个答案对你有帮助：检查我对你的其他问题的编辑。

var email = document.getElementById("mail");

    email.addEventListener("input", function (event) {
      if (email.validity.typeMismatch) {
        email.setCustomValidity("I expect an e-mail, pls!");
      } else {
        email.setCustomValidity("");
      }
    });

<form method="post" action="/foo" novalidate>...</form>