输入：无效的CSS规则应用于页面加载 [英] input:invalid css rule is applied on page load

问题描述

请在Firefox或Chrome中查看这两个小提琴。
在这中，我只有一个简单的表单，其中包含必需属性和提交按钮。当框为空时按下submit会导致它被设置为 invalid （在Firefox中，它是一个红色轮廓）。但它会一直等到你按下提交以显示它是无效的。

现在尝试这个。这是相同的，除了有一些CSS：

 输入：invalid {
 border-color：orange 
 }  
 
 $ b 
除此之外，在提交之前，即使也应用橙色边框颜色按下。因此，当且仅当您为表单手动设置无效样式时，浏览器才会应用它，这不是直观的行为。 
 
 
 
有没有办法解决这个问题？
解决方案
以下是您要找的内容： http：// jsfiddle。 net / CaseyRule / 16fuhf6r / 2 /  
 
 
 
风格如下：
 
 
  form.submitted input：invalid {
 border-color：orange 
} 
  
然后添加这个js：
 
 $ $ $（'input [type =submit]'）。 click（function（）{
 $（'form'）。addClass（'submitted'）; 
}）; 
  

我不相信有一种方法可以在没有javascript的情况下实现这一点。

Check out these two fiddles in Firefox or Chrome. In this one, I've got just a simple form with a required attribute and a submit button. Pressing "submit" when the box is empty causes it to be styled as invalid (in Firefox, it's a red outline). But it waits until you press submit to show that it's invalid.

Now try this one. It's identical, except that there's some css:

input:invalid{
    border-color:orange
}

Except this time the orange border color is applied even before submit is pressed. So if and only if you manually set an invalid style for a form, the browser applies it before, which is not intuitive behavior. Of course a required field will invalid before you enter anything.

Is there a way to fix this?

解决方案

Here's what you're looking for: http://jsfiddle.net/CaseyRule/16fuhf6r/2/

Style it like this:

form.submitted input:invalid{
    border-color:orange
}

And then add this js:

$('input[type="submit"]').click( function(){
    $('form').addClass('submitted');
});

I don't believe there is a way to achieve this yet without javascript.

这篇关于输入：无效的CSS规则应用于页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！