Firefox 4 Required input form RED border/outline

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 plac开发者_StackOverflow中文版eholder 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.

To be more specific you need to apply that style to the input control.

input:invalid {
    box-shadow: none;
}

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

Please try this,

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

for your form in your global .js file or in header section.

Wrap your required input into a form with novalidate attribute

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