Firefox 4 Required input form RED border/outline
Solution 1
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 settingThe
:-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
To be more specific you need to apply that style to the input control.
input:invalid {
box-shadow: none;
}
Solution 3
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
matmancini
Updated on July 08, 2022Comments
-
matmancini almost 2 years
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