CSS-Firefox 4必填的输入形式为红色边框/轮廓

我最近开发了一个HTML5 jQuery插件,但在删除FF4 beta必填字段中的红色边框时遇到了麻烦。

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

您可以在此插件的演示页面上看到问题

matmancini asked 2019-11-18T23:43:17Z
5个解决方案
101 votes

CSS提供了一些新的伪选择器,供您使用一些新的HTML5表单功能。 您可能正在寻找:-moz-focusring。以下全部来自MDC Firefox 4文档:

  • :-moz-focusring CSS伪类自动应用于其内容无法根据输入的类型设置进行验证的元素

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

  • :-moz-focusring伪类现在是自动的适用于指定所需的属性; 的:optional伪类适用于所有其他领域。

  • :-moz-focusring伪类具有被添加,让您样式表单字段中的占位符文本。

  • :-moz-focusring伪选择器让您指定外观当壁虎认为元素应该有重点指示已呈现。

jason answered 2019-11-18T23:44:13Z
65 votes

为了更具体,您需要将该样式应用于输入控件。

input:invalid {
    box-shadow: none;
}
WVDominick answered 2019-11-18T23:44:37Z
41 votes

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

:invalid {
  box-shadow: none;
}

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

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

参考:-[https://developer.mozilla.org/zh-CN/docs/Web/CSS/:invalid]

Mo. answered 2019-11-18T23:45:07Z
1 votes

将所需的input包装为具有novalidate属性的form

<form novalidate>
    <input required>
</form>
Andrew Luca answered 2019-11-18T23:45:31Z
0 votes

请尝试一下

$(“ form”)。attr(“ novalidate”,true);

全局.js文件或标头部分中的表单。

Anoop Velluva answered 2019-11-18T23:46:08Z
translate from https://stackoverflow.com:/questions/3809146/firefox-4-required-input-form-red-border-outline