接受后编辑：

Question

如果在表单字段中定义了需要，Firefox 4会自动向此元素显示红色边框，甚至在用户点击提交按钮之前。

<input type="text" name="example" value="This is an example" required />

我认为这对用户来说是令人不安的，因为他/她在开始时没有犯错。

我想隐藏初始状态的红色边框，但是当用户点击发送按钮时显示，如果缺少标记为必需的字段。

我从新的伪选择器中查看了:required和:invalid，但更改是针对之前和之后的验证。（来自Firefox 4 Required input form RED border/outline）

有没有办法在用户提交表单之前禁用红色边框，如果有一些丢失的字段则显示它？

Answer 1

这有点棘手，但我已经设置了这个例子：http://jsfiddle.net/c5aTe/这对我有用。基本上这个技巧似乎是让占位符文本无效。否则你应该能够这样做：

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

或类似的......

但是，因为FF4决定验证你的占位符文本（不知道为什么......）小提琴中的解决方案（小hacky - 使用!important）是必需的。

希望有所帮助！

修改

Doh !! - 我感觉很傻。我已经更新了我的小提琴：http://jsfiddle.net/c5aTe/2/ - 您可以使用:focus伪类来保持元素的样式，就像用户键入时一样有效。如果在项目失去焦点时内容无效，这仍将以红色突出显示，但我认为只有这么多可以用设计的行为来做...

HTH：）

接受后编辑：

OP要求的示例摘要（注意前两个仅针对FF4 - 而不是Chrome ）

修复FF以验证您的占位符文字：http://jsfiddle.net/c5aTe/

在您输入时修复FF验证：http://jsfiddle.net/c5aTe/2

JS解决方案切换样式/验证：http://jsfiddle.net/c5aTe/4

Answer 2

从Firefox 26开始，用于识别无效必填字段的实际CSS如下（来自forms.css）：

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

要在其他浏览器中复制，我使用：

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

我玩了像素设置，但我从来没有在没有看过moz源的情况下猜到1.5px。

要禁用它，您可以使用：

input:invalid {
    box-shadow: none;
}

Answer 3

这是一个非常简单的解决方案，对我有用。我基本上将丑陋的红色变成了非常漂亮的蓝色，这是非必需字段的标准颜色，还有一个网络惯例：

:required {
    border-color: rgba(82, 168, 236, 0.8);
}

Answer 4

这对我很有用：

input:invalid {
     -moz-box-shadow: none;
}

Answer 5

请试试这个，

$（ “表”）ATTR（ “NOVALIDATE”，真）;

表示您的全局.js文件或标题部分中的表单。

Answer 6

尝试：

document.getElementById('myform').reset();

Answer 7

我发现至少可以解决该问题的一种方法是：

<input type="text" name="example" value="This is an example" onInput="this.required = true;" />

这样，输入字段便以漂亮的蓝色轮廓开始，但是一旦用户输入一个字符，它就会被设置为必填（因此，如果您输入一个字符，则退格，那里是红色边框）。在这种情况下，用户可能会跳过输入，因此请确保将后端验证放在适当的位置。

Firefox 4：有没有办法删除所需表单输入中的红色边框？

7 个答案:

接受后编辑：