Input field glows in Firefox without focus - css

Question

I've run into a strange issue that only affects Firefox. All form fields display as I expect them to (that is to say, with thin 1px borders which change colour based on the current validation state of the input value) except for one specific field inside a reCAPTCHA widget, which has a persistent red glow around it until text has been added. Note that this is the ONLY field in this form which has this effect, and it isn't coming from any of my styles--I've checked the computed styles and there's nothing to explain this.
I've already applied outline: 0px none transparent; and -moz-appearance: none; to this elements without success. Thoughts?
SASS:
input, textarea, select {
padding: 0.35em 0.5em;
width: 100%;
max-width: 100%;
border: 0.1em solid #C5C5C5;
background: #FFFFFF none left center no-repeat;
// Add a subtle grey tone to the the text when not focused
color: darken(#C5C5C5, 25%);
// Nice transitions to smooth out the experience
-webkit-transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s;
-moz-transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s;
transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s;
-moz-appearance: none !important;
outline:0px none transparent !important;
&:focus {
// border-color: #000000;
border-left-width: 0.25em;
border-color: $info;
color: $base-font;
background-image: url("../img/info-arrow.png");
outline:0px none transparent !important;
&:invalid {
border-color: $error;
background-image: url("../img/required-arrow.png");
}
&:valid {
border-color: $success;
background-image: url("../img/success-arrow.png");
}
&:optional {
border-color: $info;
background-image: url("../img/info-arrow.png");
}
}
&[disabled] {
background-color: $gray;
color: darken($gray, 50%);
}
}
HTML:
<div class="field-captcha"> <div id="recaptcha_widget" style="display:none" class="recaptcha_widget">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect. Please try again.</div>
<div class="recaptcha_input">
<label class="recaptcha_only_if_image" for="recaptcha_response_field">Enter the words above:</label>
<label class="recaptcha_only_if_audio" for="recaptcha_response_field">Enter the numbers you hear:</label>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" required>
</div>
<ul class="recaptcha_options">
<li class="recaptcha-link">Powered by reCAPTCHA</li>
<li class="new-captcha">
<a href="javascript:Recaptcha.reload()">
<span class="captcha-hide">Get another CAPTCHA</span>
</a>
</li>
<li class="new-captcha audio-captcha recaptcha_only_if_image">
<a href="javascript:Recaptcha.switch_type('audio')">
<span class="captcha-hide">Get an audio CAPTCHA</span>
</a>
</li>
<li class="new-captcha image-captcha recaptcha_only_if_audio">
<a href="javascript:Recaptcha.switch_type('image')">
<span class="captcha-hide"> Get an image CAPTCHA</span>
</a>
</li>
<li class="help">
<a href="javascript:Recaptcha.showhelp()">
<i class="icon-question-sign"></i><span class="captcha-hide"> Help</span>
</a>
</li>
</ul>
</div>
EDIT: Added SASS and relevant HTML to question

Answer 1

Following Steven Don's noting that it was a box-shadow effect I tried adding box-shadow: none to all inputs and textareas and it overrode the default Firefox styling causing this red glow effect. For the curious, here were the actual rules causing the effect (from forms.css):
:-moz-ui-invalid:-moz-focusring:not(output) {
box-shadow: 0px 0px 2px 2px rgba(255,0,0,0.4);
}
:-moz-ui-invalid:not(output) {
box-shadow: 0px 0px 1.5px 1px red;
}
Since they're from the browser stylesheet they're easy to override with even a basic element selector, which is what I've done here. Either way it resolves this particular cross-browser display issue.