Firefox 4 必需的输入表单红色边框/轮廓 [英] Firefox 4 Required input form RED border/outline

问题描述

我最近开发了一个 HTML5 jQuery 插件，但在 FF4 测试版中删除必填字段上的红色边框时遇到问题.

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

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

解决方案

对于 CSS 中的一些新 HTML5 表单功能，您可以使用一些新的伪选择器.您可能正在寻找 :invalid.以下全部来自 MDC Firefox 4 文档::>

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

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

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

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

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

I have recently developed an HTML5 jQuery plugin and I'm having trouble removing the red border on required fields in FF4 beta.

I noticed that FF applies this border/outline in required fields and removes it when value is set. The problem is that I am using the value attribute to emulate the placeholder attr in older browsers. Therefore I need all inputs with this feature to not show the red line.

You can see the problem in the demo page of the plugin here

解决方案

There's some new pseudo selectors for some of the new HTML5 form features available to you in CSS. You're probably looking for :invalid. The following are all from the MDC Firefox 4 docs:

• The :invalid CSS pseudo-class is applied automatically to elements whose contents fail to validate according to the input's type setting

• The :-moz-submit-invalid pseudo-class is applied to the submit button on form fields when one or more form fields doesn't validate.

• The :required pseudo-class is now automatically applied to fields that specify the required attribute; the :optional pseudo-class is applied to all other fields.

• The :-moz-placeholder pseudo-class has been added, to let you style placeholder text in form fields.

• The :-moz-focusring pseudo-selector lets you specify the appearance of an element when Gecko believes the element should have a focus indication rendered.

这篇关于Firefox 4 必需的输入表单红色边框/轮廓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！