Firefox 4 Required Input Form Red Border/Outline

Firefox 4 : Is there a way to remove the red border in a required form input?

This was a little tricky but I've set up this exmaple: http://jsfiddle.net/c5aTe/ which is working for me. Basically the trick seems to be getting around having placeholder text which is invalid. Otherwise you should be able do this:

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

or something similar...

BUT since FF4 decides to validate your placeholder text (no idea why...) the solution in the fiddle (little hacky - uses !important) is required.

EDIT

Doh!! - I feel well silly. I've updated my fiddle: http://jsfiddle.net/c5aTe/2/ - you can use the :focus pseudo class to keep the element styled as if valid while the user is typing. This will still highlight in red if the content is invalid when the item loses focus but I think there is only so much you can do with the designed behaviour...

HTH :)

---

EDIT after acceptance:

Summary of examples at OP's request (note the first two are only designed for FF4 - not Chrome)

1. Fix for FF validating your place holder text: http://jsfiddle.net/c5aTe/
2. Fix for FF validating as you type: http://jsfiddle.net/c5aTe/2
3. JS solution toggling styles/validation: http://jsfiddle.net/c5aTe/4

Firefox draws red border on required select box

To get around this, you can disable the required style for when the form is pristine only:

.ng-pristine .ng-invalid-required {
    box-shadow: none;
}

After a user has entered invalid data (and the ng-pristine class has changed to ng-dirty), the box-shadow will show again b/c this rule will no longer apply.

Firefox still keeps an input field with a red border though I removed it

The required attribute can cause browsers to validate the fields and put their own css on them. If you are using custom validation, then you may need to remove this attribute in order to stop the browser from also validating it

More information about html5 form validation

Alternately, you may be able to override the style using something like this:

input:invalid {
   border ... 
}

Required input field gets border when value is empty and color is styled

The HTML5 attribute required is obviously being interpreted by firefox to include a red border, here's an answer about removing it

Firefox 4 Required input form RED border/outline

so just do:

[required] {
    color:red;
    box-shadow: none;
}

fixed

How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

You use the :valid pseudo class.

To shamelessly copy the code from https://developer.mozilla.org/en-US/docs/Web/CSS/:valid:

input:invalid {  background-color: #ffdddd;}form:invalid {  border: 5px solid #ffdddd;}input:valid {  background-color: #ddffdd;}form:valid {  border: 5px solid #ddffdd;}input:required {  border-color: #800000;  border-width: 3px;}

<form>  <label>Enter a URL:</label>  <input type="url" />  <br />  <br />  <label>Enter an email address:</label>  <input type="email" required/></form>

Red border still appears on inputs after resetting an HTML 5 form Firefox

Mozilla Firefox applies a pseudo class :-moz-ui-invalid to any invalid form control. If the form was never submitted or if all form input controls are valid when the form's submit() method is invoked then invoking the form's reset() method will cause the pseudo class to be removed from the input controls.

However, if any of the form's input controls are invalid when the form is submitted then the pseudo class will always be applied invalid input controls even after the form has been reset.

For full documentation and to download the commented javascript file go to: http://www.syn-to.com/moz-ui-invalid.php

var form; 

(function()
{
    "use strict";

    //name must be a valid form name eg. <form name="myFormName" ...
    form = function(name)
    {
        var a =
        {
            "registerReset": function()
            {
                //if the boxShadow property exists, bind the reset event handler
                //to the named form

                if(typeof document.forms[name].style.boxShadow !== 'undefined')
                {
                    document.forms[name].addEventListener('reset', a.resetEventHandler);
                }
            },

            "reset": function()
            {
                a.registerReset();
                document.forms[name].reset();
            },

            "resetEventHandler": function()
            {
                //override the default style and apply no boxShadow and register
                //an invalid event handler to each of the form's input controls
                function applyFix(inputControls)
                {
                    for(var i=0;i<inputControls.length;i++)
                    {

                        inputControls[i].style.boxShadow = 'none';
                        inputControls[i].addEventListener('invalid', a.invalidEventHandler);
                        inputControls[i].addEventListener('keydown', a.keydownEventHandler);
                    }
                }

                var inputControls = this.getElementsByTagName('input');
                applyFix(inputControls);

                var inputControls = this.getElementsByTagName('textarea');
                applyFix(inputControls);

                var inputControls = this.getElementsByTagName('select');
                applyFix(inputControls);

            },

            "invalidEventHandler": function()
            {

                this.style.boxShadow = '';
                this.removeEventListener('invalid', a.invalidEventHandler);
                this.removeEventListener('keydown', a.keydownEventHandler);
            },

            //the following functions emulates the restore of :-moz-ui-invalid
            //when the user interacts with a form input control
            "keydownEventHandler": function()
            {
                this.addEventListener('blur', a.blurEventHandler);
            },

            "blurEventHandler": function()
            {
                this.checkValidity();
                this.removeEventListener('blur', a.blurEventHandler);
            }
        };

        return a;
    }

})();

Usage:

Either of the following 2 methods must be invoked prior to a native reset (invoking the form's reset() method):

<form name="formName" ...>...</form>

form('formName').registerReset();  //registers the event handlers once
form('formName').reset(); //registers the event handlers at the time reset is called 
                          //and then calls the form's native reset method, may be used 
                          //in place of the native reset

In my opinion, regardless of whether ajax is used or not and regardless of whether the user attempted to previously submit a form with invalid input controls, a reset ought to remove that style! I have filed a bug report however so far it is not deemed to be a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=903200

This should help someone else out as well.

---

Related Topics