Firefox 4 Required input form RED border/outline

Question

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

Answer 1

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

Answer 2

Please try this,

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

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

Answer 3

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.

Answer 4

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

input:invalid {
    box-shadow: none;
}

Answer 5

Wrap your required input into a form with novalidate attribute

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