Html HTML5 必需的输入样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5249152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Required input styling
提问by Xodarap
In HTML 5, we can mark inputs as requiredand then select them with the [required]pseudo-selector in CSS. But I only want to style them when they try to submit the form without filling out a required element. Is there a selector for this? How about for the little message box which pops up?
在 HTML 5 中，我们可以将输入标记为required，然后使用[required]CSS 中的伪选择器选择它们。但我只想在他们尝试提交表单而不填写所需元素时为其设置样式。有这个选择器吗？弹出的小消息框呢？
采纳答案by NikoRoberts
Yeah as SLaks said there is no CSS selector to do this. I would doubt this will ever be in the scope of CSS because CSS would need to check the contents of an input.
是的，正如 SLaks 所说，没有 CSS 选择器可以做到这一点。我怀疑这是否会在 CSS 的范围内，因为 CSS 需要检查输入的内容。
Your best option, still, is probably to call a javascript validation function when clicking a button, rather than actually submitting the form. Then checking the [required] fields for appropriate content and either submitting the form or highlighting the required fields that were not filled in.
您最好的选择仍然是在单击按钮时调用 javascript 验证函数，而不是实际提交表单。然后检查 [必填] 字段是否有适当的内容，并提交表单或突出显示未填写的必填字段。
JQuery has some nice plugins that take care of this for you http://docs.jquery.com/Plugins/validation
JQuery 有一些不错的插件可以为您处理这个问题 http://docs.jquery.com/Plugins/validation
回答by Ilia Draznin
You can use :valid and :invalid selectors. Something like this
您可以使用 :valid 和 :invalid 选择器。像这样的东西
.field:valid {
border-color:#0f0;
}
.field:invalid {
border-color:#f00;
}
However, this will only work in browsers that support native validation, and only for fields that make sense. As far as I know, right now that only means Chrome (maybe Safari, but haven't checked).
但是，这仅适用于支持本机验证的浏览器，并且仅适用于有意义的字段。据我所知，现在这仅意味着 Chrome（可能是 Safari，但尚未检查）。
So by native validation I mean that in chrome if you do <input type="email">the field's value will be validated for email type string (without any additional javascript), so the styles above will work. However, if you were to attach them to a type="text"field, or a second password field (that is suppose to match the first), you'd only ever get green because everything is valid, and in the case of password, there's no "type" for that anyway.
因此，通过本机验证，我的意思是在 chrome 中，如果您执行<input type="email">该字段的值，将针对电子邮件类型字符串进行验证（无需任何额外的 javascript），因此上述样式将起作用。但是，如果您要将它们附加到一个type="text"字段或第二个密码字段（假设与第一个匹配），您只会变绿，因为一切都是有效的，而在密码的情况下，没有“类型“无论如何。
Which basically means that to support all browsers, and more importantly, wider array of validations you still have to resort to javascript, in which case assigning .valid/.invalid class shouldn't be a problem. :)
这基本上意味着要支持所有浏览器，更重要的是，您仍然必须使用 javascript 进行更广泛的验证，在这种情况下，分配 .valid/.invalid 类应该不是问题。:)
回答by Toby
I've resorted to using JavaScript to apply a class of .validatedto the form on submit, then use that class to style :invalidfields, e.g.:
我已经使用 JavaScript.validated在提交时将一个类应用于表单，然后使用该类来设置:invalid字段的样式，例如：
.validated input:invalid {
...
}
This way fields don't show up as invalid on page load, only after the form is submitted.
这样字段在页面加载时不会显示为无效，只有在提交表单之后。
Ideally there would be a pseudo class applied to the form on submit.
理想情况下，提交时会有一个应用于表单的伪类。
回答by Kevin C.
There's a :user-errorpseudoclass in the CSS Selectors 4 working draftthat will do exactly this, firing on both input blur and form submit.
CSS Selectors 4 工作草案中有一个:user-error伪类可以做到这一点，同时触发输入模糊和表单提交。
In the mean time, I'm personally using the awesome webshims polyfill librarywhich covers :user-error, or you could hack it out yourself with something along the lines of Toby's answer.
与此同时，我个人使用了很棒的webshims polyfill 库，它涵盖了 :user-error，或者你可以按照 Toby 的回答来自己破解它。
回答by JustSomeGuy
input:required {
/* Style your required field */
/* Be sure to style it as an individual field rather than just add your desired styles
for a required field. */
}
Tried and tested in chrome. I haven't tested it in any other browser.
在 chrome 中进行了尝试和测试。我还没有在任何其他浏览器中测试过它。
回答by TaeKwonJoe
This solution will style input fields that are required via attribute whileblank. Browsers will remove the :invalid pseudo class when populating a required field on keydown. Recent versions of Firefox automatically apply something similar to this style but Chrome and IE do not.
该解决方案将是通过属性需要风格的输入字段，而空。在 keydown 上填充必填字段时，浏览器将删除 :invalid 伪类。最新版本的 Firefox 会自动应用类似于此样式的内容，但 Chrome 和 IE 不会。
input[required]:invalid { box-shadow: 0 0 3px 1px red }
Try it: http://jsfiddle.net/2Ph2X/
回答by Navi
Very simple, just add the class when the element is in focus, then during the submit it gives focus on the elements that are incorrect and the client is filling and validating one by one I believe it is the best solution without using JavaScript.
很简单，只要在元素处于焦点时添加类，然后在提交时它会关注不正确的元素，并且客户端正在一一填充和验证我认为这是不使用JavaScript的最佳解决方案。
input:required:focus {
?? border-color: palegreen;
}
input:invalid:focus {
?? border-color: salmon;
}
