HTML5需要的输入样式

问题描述：

在HTML 5中，我们可以将输入标记为required，然后在CSS中使用[required]伪选择器来选择它们。但我只想在他们尝试提交表单而不填写所需元素时对其进行设计。有没有这个选择器？如何弹出小消息框？HTML5需要的输入样式

号。 – SLaks 2011-03-09 16:49:04

@SLaks：那是什么意思？只要你喜欢默认的样式，它会起作用吗？ – Xodarap 2011-03-09 17:10:41

看到这个问题的更多信息http://*.com/questions/5660177/styling-the-hint-on-a-html5-input-field-using-required-attribute – alpha1 2012-06-29 16:55:58

答

是的SLaks说没有CSS选择器来做到这一点。我怀疑这将永远在CSS的范围内，因为CSS需要检查输入的内容。

你最好的选择仍然是在点击按钮时调用一个javascript验证函数，而不是实际提交表单。然后检查适当的内容[必需]字段，或者提交表单或加亮所需的字段都没有填写。

JQuery的有照顾这对你 http://docs.jquery.com/Plugins/validation

答

你可以一些不错的插件使用：有效和无效的选择器。这样

.field:valid { 
    border-color:#0f0; 
} 
.field:invalid { 
    border-color:#f00; 
}

东西但是，这只会在支持本地验证，只为使感应场浏览器。据我所知，现在只是Chrome（可能是Safari，但没有检查过）。

因此，通过本地验证，我的意思是说，如果您使用的是Chrome浏览器<input type="email">，则该字段的值将针对电子邮件类型字符串进行验证（不包含任何其他JavaScript），因此上述样式将起作用。但是，如果您将它们附加到type="text"字段或第二个密码字段（假设与第一个字段相匹配），则只会变绿，因为所有内容都是有效的，并且在密码的情况下，没有“键入“无论如何。

这基本上意味着支持所有的浏览器，更重要的是，更广泛的验证，你仍然必须求助于JavaScript，在这种情况下分配.valid/.invalid类应该不成问题。 :)

它看起来像我这些设置页面加载，所以我遇到了与[[required]'相同的问题。 – Xodarap 2011-03-14 15:55:03

@Xodarap，它在页面加载时设置，但输入状态从有效更改为无效，所以这将工作得很好。 – Johan 2011-09-07 11:16:23

@Johan这样做只会改变样式之间的输入变化之间（in）有效。不是Xodarp想要的 - 只有在点击提交后才需要所有其他框的样式... – will 2012-05-02 10:21:39

答

我已经诉诸使用JS来应用类的.validated就提交表单，然后使用类风格：无效fields.eg：

.validated input:invalid { ... }

这样的字段不要在页面加载时显示为无效，只有在提交表单后。理想情况下，会有一个pseodo类应用于提交表单。

你也可以做这样的事情来允许实时验证检查： '$（'input [required]'） .on'keyup'， - > $（this）.addClass（'validate-me'）。off（'keyup'）' 然后为'input [required] .validate-me：invalid'添加CSS样式。 etc – Jayphen 2012-08-23 08:20:17

@Toby：顺利，+1！ – 2013-11-07 02:33:03

答

CSS Selectors 4 working draft中有一个:user-error伪类，它将完成这一操作，触发输入模糊和表单提交。与此同时，我亲自使用了真棒webshims polyfill library，其中涵盖：用户错误，或者你可以用Toby的答案来解决这个问题。

答

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. */ 
}

在铬中试过并测试过。我没有在任何其他浏览器中测试过它。

这是最好的答案！ – 2014-07-21 20:04:59

答

此解决方案将样式输入字段的样式通过属性而为空。在keydown上填充必填字段时，浏览器将删除：无效的伪类。 Firefox的最新版本自动应用类似于这种风格的东西，但Chrome和IE不支持。

input[required]:invalid { box-shadow: 0 0 3px 1px red }

尝试：这需要Javascript http://jsfiddle.net/2Ph2X/

HTML5需要的输入样式

相关推荐