Firefox 4 Required input form RED border/outline
HtmlCssFirefoxWebformsJquery PluginsHtml Problem Overview
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
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
To be more specific you need to apply that style to the input control.
input:invalid {
box-shadow: none;
}
Solution 3 - Html
use this code as Quick and simple solution
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow:none;
}
Reference:- https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
Solution 4 - Html
Please try this,
$("form").attr("novalidate",true);
for your form in your global .js file or in header section.
Solution 5 - Html
Wrap your required input
into a form
with novalidate
attribute
<form novalidate>
<input required>
</form>