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

score 111 · Answer 1 · edited Apr 13 '15 at 18:15

111

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.

edited Apr 13 '15 at 18:15

Connor Pearson

63,902
28
145
142

answered Sep 28 '10 at 02:04

jason

8,918
2
37
43

2

i set up the -moz-mox-shadow property to 'none'. – matmancini Sep 28 '10 at 02:14
27

You should really check his answer as "the answer", and give him an up arrow, that's how this site works. Doing that would be a big thanks :D – Ammi J Embry Sep 28 '10 at 02:34
There's also the `:-moz-ui-invalid` pseudo-class, which applies in a subset of cases for `:invalid`. Gecko uses it and applies a red glow using the `box-shadow` property – S. Esteves Dec 09 '19 at 02:36

score 83 · Answer 2 · edited Mar 03 '16 at 18:27

83

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

input:invalid {
    box-shadow: none;
}

edited Mar 03 '16 at 18:27

vsync

118,978
58
307
400

answered May 20 '11 at 13:52

WVDominick

2,074
15
17

14

Scratch that. Simply `box-shadow:none` worked for me now. Sorry for the incompetence. – rgin Aug 10 '12 at 10:39
1

Add textarea also. input:invalid, textarea:invalid { box-shadow: none; } – Mina Luke Apr 12 '18 at 06:49

score 49 · Answer 3 · answered Apr 07 '14 at 23:56

49

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

answered Apr 07 '14 at 23:56

Mo.

26,306
36
159
225

3

This worked perfectly for me to remove (never show) the red border around input fields when invalid in Firefox. Thanks! – B R Jun 04 '14 at 14:38
The third element is what removed the red box for me. – Andy Swift Oct 23 '14 at 10:39
@Andrew Swift use all of them for compatibility – Mo. Oct 23 '14 at 11:55

score 0 · Answer 4 · answered May 29 '15 at 08:56

0

Please try this,

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

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

answered May 29 '15 at 08:56

Anoop Velluva

329
2
9

score 0 · Answer 5 · answered Oct 25 '17 at 11:21

0

Wrap your required input into a form with novalidate attribute

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

answered Oct 25 '17 at 11:21

iamandrewluca

3,411
1
31
38

Firefox 4 Required input form RED border/outline

5 Answers5

Linked