93

当在表单域中定义 required 时，Firefox 4 会自动在该元素上显示一个红色边框，即使在用户点击提交按钮之前也是如此。

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

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

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

我查看了新的伪选择器:required和:invalid来自新的伪选择器，但更改是针对验证之前和之后的。（来自Firefox 4 所需的输入表单 RED 边框/轮廓）

有没有办法在用户提交表单之前禁用红色边框，并在缺少某些字段时显示它？

4

7 回答 7

156

这有点棘手，但我已经设置了这个例子：http: //jsfiddle.net/c5aTe/这对我有用。基本上，诀窍似乎是绕过无效的占位符文本。否则你应该可以这样做：

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

或类似的东西...

但是由于 FF4 决定验证您的占位符文本（不知道为什么......），所以!important需要小提琴中的解决方案（小 hacky - 用途）。

希望有帮助！

编辑

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

HTH :)

接受后编辑：

应 OP 要求的示例摘要（注意前两个仅适用于 FF4 -而不是 Chrome）

  1. 修复 FF 验证您的占位符文本：http: //jsfiddle.net/c5aTe/
  2. 修复您键入时的 FF 验证：http: //jsfiddle.net/c5aTe/2
  3. JS 解决方案切换样式/验证：http: //jsfiddle.net/c5aTe/4
于 2011-05-31T14:52:05.753 回答
39

从 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;
}
于 2014-01-18T00:21:44.443 回答
4

尝试：

document.getElementById('myform').reset();
于 2019-04-30T10:50:54.550 回答
1

这是一个对我有用的非常简单的解决方案。我基本上把难看的红色变成了非常漂亮的蓝色，这是非必填字段的标准颜色，也是一个网络约定：

:required {
    border-color: rgba(82, 168, 236, 0.8);
}
于 2013-08-14T05:52:15.373 回答
0

这对我来说效果很好：

input:invalid {
     -moz-box-shadow: none;
}
于 2011-05-20T13:51:00.617 回答
-1

请试试这个，

$("form").attr("novalidate",true);

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

于 2015-06-19T07:27:58.830 回答
-1

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

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

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

于 2020-11-16T19:18:43.867 回答