Firefox 4: Is there a way to remove the red border as the required shape?

Question

If necessary, defined in the form field, Firefox 4 automatically shows the red border of this element, even if the user clicks the submit button.

<input type="text" name="example" value="This is an example" required /> 

I think this bothers the user as he / she made no mistakes at the beginning.

I want to hide this red frame for the initial state, but I will show it when the user clicks the submit button, if there is a missing field, marked as required.

I looked at :required and :invalid on the new pseudo selector, but the changes for before and after checking. (from Firefox 4 Required input form RED border / outline )

Is there a way to disable the red border before the user submits the form and show it if there are some missing fields?

Answer 1

It was a bit complicated, but I set up this exmaple: http://jsfiddle.net/c5aTe/ , which works for me. In principle, it seems that the trick is that the placeholder text is invalid. Otherwise, you can do this:

 input:required { box-shadow:none; } input:invalid { box-shadow:0 0 3px red; } 

or something similar...

BUT , since FF4 decides to check your placeholder text (I don’t know why ...) a solution is needed in the violin (few hacks - uses !important ).

Hope this helps!

EDIT

Doh !! . I feel stupid. I updated my script: http://jsfiddle.net/c5aTe/2/ - you can use the :focus pseudo-class to keep the stylized element as if it were entered during user input. This will still be highlighted in red if the content is invalid when the element loses focus, but I think you can only do so much with the developed behavior ...

Hth :)

---

EDIT after adoption:

Summary of examples in an OP request (note that the first two are for FF4 only, not Chrome)

• Fix for FF confirming your place owner text: http://jsfiddle.net/c5aTe/
• Fix for checking FF as you type: http://jsfiddle.net/c5aTe/2
• JS style switching / validation solution: http://jsfiddle.net/c5aTe/4

Answer 2

As in Firefox 26, the actual CSS used to identify invalid required fields is as follows (derived from forms.css):

 :not(output):-moz-ui-invalid { box-shadow: 0 0 1.5px 1px red; } 

For replication in other browsers, I use:

 input:invalid { box-shadow: 0 0 1.5px 1px red; } 

I played with pixel settings, but I would never have guessed 1.5px without looking at the source of moz.

To disable it, you can use:

 input:invalid { box-shadow: none; } 

Answer 3

Here is a very easy solution that worked for me. I basically changed the ugly red color to a very beautiful blue color, which is the standard color for optional fields and the web convention:

 :required { border-color: rgba(82, 168, 236, 0.8); } 

Answer 4

This worked for me:

 input:invalid { -moz-box-shadow: none; } 

Answer 5

Try it,

$ ("form") atr ("NOVALIDATE", true) ;.

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

Answer 6

Try:

 document.getElementById('myform').reset();