Firefox 4 必需的输入表单红色边框/轮廓

Posted 2023-02-15

【中文标题】Firefox 4 必需的输入表单红色边框/轮廓

【英文标题】：Firefox 4 Required input form RED border/outline

【发布时间】：2011-04-18 01:44:12

【问题描述】：

我最近开发了一个 html5 jQuery 插件，但在移除 FF4 beta 中必填字段的红色边框时遇到了问题。

我注意到 FF 在必填字段中应用此边框/轮廓，并在设置值时将其删除。问题是我使用 value 属性来模拟旧浏览器中的占位符 attr。因此，我需要具有此功能的所有输入不显示红线。

可以在plugin here的demo页面看到问题

【参考方案1】：

在 CSS 中为您提供了一些新的 HTML5 表单功能的新伪选择器。您可能正在寻找:invalid。以下均来自MDC Firefox 4 docs：

:invalid CSS 伪类自动应用于内容无法根据输入的类型设置验证的元素

:-moz-submit-invalid 伪类是 应用于表单上的提交按钮 一个或多个表单字段时的字段 不验证。

:required 伪类现在自动 应用于领域 指定所需的属性；这 :optional 伪类应用于 所有其他领域。

:-moz-placeholder伪类有 已添加，让您的风格 表单字段中的占位符文本。

:-moz-focusring 伪选择器 让您指定一个外观 当 Gecko 相信 元素应该有一个焦点 呈现的指示。

【讨论】：

我将 -moz-mox-shadow 属性设置为“无”。

你真的应该检查他的答案为“答案”，并给他一个向上的箭头，这就是这个网站的运作方式。这样做将非常感谢：D

还有:-moz-ui-invalid 伪类，它适用于:invalid 的一部分案例。 Gecko 使用它并使用 box-shadow 属性应用红光

【参考方案2】：

更具体地说，您需要将该样式应用于输入控件。

input:invalid 
    box-shadow: none;

【讨论】：

从头开始。只需 box-shadow:none 现在为我工作。抱歉无能。

同时添加文本区域。输入：无效，文本区域：无效 框阴影：无；

【参考方案3】：

将此代码用作快速简单的解决方案

:invalid 
  box-shadow: none;


:-moz-submit-invalid 
  box-shadow: none;


:-moz-ui-invalid 
  box-shadow:none;

参考：-https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

【讨论】：

这对我来说非常有效，可以在 Firefox 中无效时删除（从不显示）输入字段周围的红色边框。谢谢！

第三个元素是为我移除了红色框的内容。

@Andrew Swift 将它们全部用于兼容性

【参考方案4】：

请试试这个，

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

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

【参考方案5】：

用novalidate 属性将你需要的input 包装成form

<form novalidate>
    <input required>
</form>