Firefox 中的输入字段在没有焦点的情况下发光

Question

我遇到了一个只影响 Firefox 的奇怪问题。除了 reCAPTCHA 小部件内的一个特定字段外，所有表单字段都按我的预期显示（也就是说，带有 1px 的细边框，根据输入值的当前验证状态改变颜色），它周围有持续的红色光芒直到添加了文本。请注意，这是此表单中唯一具有此效果的字段，它不是来自我的任何样式——我检查了计算的样式，没有什么可以解释的。

我已经将outline: 0px none transparent; 和-moz-appearance: none; 应用于这些元素，但没有成功。想法？

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"><a href="http://www.google.com/recaptcha" title="reCAPTCHA">Powered by reCAPTCHA</a></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>

编辑：向问题添加了 SASS 和相关 HTML

Answer 1

在Steven Don's 注意到它是box-shadow 效果之后，我尝试将box-shadow: none 添加到所有输入和文本区域，它覆盖了默认的Firefox 样式，导致了这种红光效果。对于好奇的人，这里是导致效果的实际规则（来自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;
}

由于它们来自浏览器样式表，因此即使是基本的元素选择器也很容易覆盖它们，这就是我在这里所做的。无论哪种方式，它都能解决这个特定的跨浏览器显示问题。