获取HTML5中必需的CSS浏览器使用

Question

I am currently working on an application that uses both html5 required tags and the jquery validation plugin to make sure all fields are filled in prior to a form submission. 我目前正在开发一个使用html5必需标签和jquery验证插件的应用程序，以确保在提交表单之前填写所有字段。 I would like the error messages to look the same, but I don't really know where to begin looking for the styling each browser uses to handle the required tag in html5. 我希望错误消息看起来一样，但是我真的不知道从哪里开始寻找每种浏览器用来处理html5中所需标记的样式。 Is there any way to grab the CSS that a browser uses for the required tag? 有什么方法可以获取浏览器用于必需标签的CSS？ (I could just hardcode a .required class myself, but I'd like to at least find the styling for one browser because from what I've seen they are all nicer than what I know how to make!) （我可以自己对.required类进行硬编码，但我至少希望找到一种浏览器的样式，因为从我所看到的来看，它们都比我知道的要好！）

Thanks! 谢谢！

Answer 1

Well you can try to grab these styles with your browser inspector (F12 in Chrome or right click -> inspect element, but I don't know if you can target it). 好吧，您可以尝试使用浏览器检查器获取这些样式（Chrome中的F12或右键单击-> inspect元素，但我不知道您是否可以定位它）。 If you are a new developer as you said you might find SnappySnippet Chrome plugin very handy. 如果您是新开发者，则可能会发现SnappySnippet Chrome插件非常方便。 It allows you to send styles of the last checked element (with inspector) to CodePen or to JSFiddle . 它允许您将最后检查的元素的样式（使用检查器）发送到CodePen或JSFiddle 。

Anyway if you can't target the message with the inspector you can find default styles for webkit based browsers Here , just search for ::-webkit-validation-bubble 无论如何，如果您无法使用检查器定位邮件，则可以在此处找到基于Webkit的浏览器的默认样式，只需搜索::-webkit-validation-bubble

Answer 2

From what I can tell, Chrome uses a "callout" type shape. 据我所知，Chrome使用的是“标注”类型的形状。 It isn't exactly the same, but you can create something similar on this site: http://csstooltip.com/ 它并不完全相同，但是您可以在此站点上创建类似内容： http : //csstooltip.com/

In Firefox, what you need to do is create a sample page, right click on the element (input field) and select "Inspect Element". 在Firefox中，您需要做的是创建一个示例页面，右键单击元素（输入字段），然后选择“检查元素”。 After you do that you should be able to click the "Computed styles" tab on the right side of your screen and you can select the check box at the bottom that says "Browser styles". 完成后，您应该可以单击屏幕右侧的“计算样式”选项卡，并且可以选中底部的“浏览器样式”复选框。 This will show you what the browser does. 这将向您显示浏览器的功能。

By the way, in case you need some test code that you can run really easily, the following should work well: 顺便说一句，如果您需要一些可以非常轻松地运行的测试代码，则以下代码应该可以正常工作：

<html>
    <head><title>test</title></head>

    <body>
        <form name="input" action="#" method="get">
            <input type="text" required placeholder="example"/>
            <input type="text" required placeholder="example" />
            <input type="submit" value="submit" />
        <form>
    </body>
</html>

Good luck! 祝好运！

获取HTML5中必需的CSS浏览器使用

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-12-04 18:29:25

解决方案2
0 2013-12-04 18:34:33

获取HTML5中必需的CSS浏览器使用

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-12-04 18:29:25

解决方案2 0 2013-12-04 18:34:33

解决方案1
0 已采纳 2013-12-04 18:29:25

解决方案2
0 2013-12-04 18:34:33