如何在表单中设置标题元素的样式？答案

【问题标题】：How do I style the title element within a form?如何在表单中设置标题元素的样式？
【发布时间】：2023-03-24 10:27:01
【问题描述】：

我正在使用 jQuery 验证来确保我的表单被正确提交。我正在尝试在我的表单中设置标题元素的样式，以便当用户没有正确填写表单时，弹出的文本是红色而不是黑色。我的 HTML 如下...

<form id="contact" method="post" action="E-mail-form.php" name="EmailFromMyWebsite">

                <label for="name">Name</label> <br>
                <input type="text" name="name" class="required" placeholder="Your Name" title=" (Your name is required)"> <br />

                <label for="email">E-mail</label> <br>
                <input type="email" name="email" class="required email" placeholder="Name@email.com" title=" (Your email is required)"> <br />

                <label for="message">Message/Comment</label> <br>
                <textarea name="message" class="required" placeholder="Leave a brief message" title=" (Please leave me a brief message)"></textarea> <br />

                <input type="submit" name="submit" id="submit" value="Send Message" />
        </form>

在 CSS 中我尝试了一些东西，例如

#contact[type="title"] {
    color: red;
}

#input[type="title"] {
    color: red;
}

title {
    color: red;
}

我也尝试了#contact，这会使整个表单变红。我只希望 title="" 是红色的。有谁知道如何做到这一点？

【问题讨论】：

title 是一个属性，而不是一个元素。提交表单错误，然后查看您的 jQuery 插件应用到创建的元素的类。
您不能设置标题文本的样式（尽管可能会破坏文本），而是可以使用 jQuery 来设置它们的样式，例如 tipsy
@Blender 这很有道理，但我该怎么做呢？

标签： forms css attributes title

【解决方案1】：

您不能在输入元素或任何元素上设置 title 属性的样式。看看jQueryUI Tooltip。这应该可以帮助您获得一些样式化的工具提示。

【讨论】：

我能够将整个表单的颜色更改为红色。有没有办法只定位标题？
不，没有办法，标题不是元素，它是元素的属性。浏览器对如何呈现这些标题属性有自己的实现。如果您想要样式化的工具提示，请查看答案中提供的链接。它的工作原理是让 jQuery 从元素上的标题标签中读取文本，然后将一些新生成的 HTML 动态插入到 DOM 中，然后显示来自 title 属性的文本。然后，这个新生成的 HTML 将附加类，然后您可以在 CSS 中引用它。
如果您使用 jQuery Validation 这个 css 将允许您更改错误消息... label.error { color:red;左填充：5px； }

【解决方案2】：

如果您使用 jQuery 验证“label.error”将允许您设置错误消息的样式...

label.error { 
    color:red; 
    padding-left: 5px; 
}

【讨论】：