Question

我遇到了一个只影响Firefox的奇怪问题。所有表单字段都显示为我期望它们（也就是说，具有基于输入值的当前验证状态改变颜色的薄1px边框），除了reCAPTCHA小部件中的一个特定字段，其具有持久的红色光晕它直到文本被添加。请注意，这是此形式中唯一具有此效果的字段，并且它不是来自我的任何样式 - 我已经检查了计算出的样式，并且没有任何内容可以解释这一点。

Problem screenshot

我已将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添加到所有输入和textareas，并覆盖默认的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;
}

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

输入字段在Firefox中发光而没有焦点

1 个答案: